Added functionality and dark mode to doctests. And other changes in maps.

This commit is contained in:
2019-11-20 15:59:10 +01:00
parent 89395ba641
commit 6dcf6d38da
13 changed files with 8261 additions and 8520 deletions
+11 -2
View File
@@ -86,12 +86,20 @@ import MapApp from './maps/mapapp.js'
window.MapApp = MapApp
import { AdvancedScatterContainer, RigidContainer, CompactScatter, CoverScatter } from './maps/scatter.js'
import {
AdvancedScatterContainer,
RigidContainer,
CompactScatter,
CoverScatter,
MapObjectScatter
} from './maps/scatter.js'
window.AdvancedScatterContainer = AdvancedScatterContainer
window.RigidContainer = RigidContainer
window.CompactScatter = CompactScatter
window.CoverScatter = CoverScatter
window.MapObjectScatter = MapObjectScatter
import { GeoLayer, MapLayer } from './maps/geolayer.js'
window.GeoLayer = GeoLayer
@@ -110,4 +118,5 @@ import Overlay from './maps/overlay.js'
window.Overlay = Overlay
import { MapList } from './maps/maplist.js'
window.MapList = MapList
window.MapList = MapList
+14 -18
View File
@@ -26,7 +26,6 @@ export class GeoGraphics {
this.drawEndHandler = new EventHandler('onDrawEnd', { listeners: onDrawEnd })
this._points = null
this._position = null
this.map = null
}
clone() {
@@ -92,7 +91,6 @@ export class GeoGraphics {
* Called by the containing geo layer, when the map changes.
*/
adaptTo(map) {
this.map = map
this._points = this._adaptCoordinates(map)
this._updatePosition()
this.draw()
@@ -135,23 +133,21 @@ export class GeoGraphics {
this._layer = layer
}
// 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() {
let map = null
if (this.mapLayer) {
map = this.mapLayer.map
}
return map
}
// 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() {
let mapLayer = null
if (this.layer) {
mapLayer = this.layer.mapLayer
}
return mapLayer
}
/**
* Prepare draw is a private function, that prepares the graphics
+48 -24
View File
@@ -145,6 +145,19 @@ export class GeoLayer {
} else console.warn('Tried to remove layer that was not set.', this, layer)
}
remove(graphics) {
if (graphics instanceof GeoGraphics) {
let index = this.geographics.indexOf(geographics)
if (index != -1) {
this.displayObject.removeChild(geographics)
} else {
console.error('Could not remove geographics from geolayer.', this, geographics)
}
} else {
this.displayObject.removeChild(graphics)
}
}
set parent(parent) {
this._parent = parent
}
@@ -208,9 +221,10 @@ export class GeoLayer {
export class MapLayer extends GeoLayer {
constructor(
mapList,
scatterContainer,
displayObject,
{ onTransform = null, onChange = null, focus = null, zoom = null, viewport = null, mapList = null } = {}
{ onTransform = null, onChange = null, focus = null, zoom = null, viewport = null } = {}
) {
super(displayObject)
@@ -231,12 +245,16 @@ export class MapLayer extends GeoLayer {
})
this.mapList = mapList
this._map = null
// //TODO Implement error handling here.
// this.maps = maps
// if (opts.map) this.placeMap(opts.map)
this.dynamicElements = new Map()
// Binds the transformed callback beforehand.
this.transformed = this.transformed.bind(this)
this.changeMap(mapList.active)
}
adapt() {
@@ -258,21 +276,18 @@ export class MapLayer extends GeoLayer {
this.transformHandler.call(this)
}
clone(container = null) {
let clone = {}
for (let name of Object.keys(this.maps)) {
//console.info(this.maps[name])
clone[name] = this.maps[name].clone(container)
}
clone(scatterContainer, container = null) {
let mapList = this.mapList.clone()
container = container == null ? new PIXI.Container() : container
//console.info(this.active)
let mapLayerClone = new MapLayer(this.active, clone, container, {
let mapLayerClone = new MapLayer(mapList, scatterContainer, container, {
name: MapLayer.idx++,
viewport: this.mapview.viewport,
focus: this.mapview.focus,
zoom: this.mapview.zoom
zoom: this.mapview.zoom,
mapList
})
//mapLayerClone._map = clone['luftbild']
mapLayerClone.childrenVisibility = this.childrenVisibility
return mapLayerClone
}
@@ -285,20 +300,29 @@ export class MapLayer extends GeoLayer {
* @memberof MapLayer
*/
changeMap(
map /*,
name
/* 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.*/
) {
if (map instanceof GeoMap) {
console.log('Change map to: ', map)
let oldMap = this.map
if (oldMap) oldMap.unload()
console.log('Change map to: ', name)
let oldMap = this.map
this._map = map
this.mapList.select(name)
this.map.load()
this.scatterContainer.addChild(this.map.image)
if (oldMap) {
oldMap.unload()
oldMap.onTransform.remove(this.transformed)
}
this.mapview.apply(this.map)
let map = this.map
if (map) {
console.log('Load Map')
map.load()
console.log(this, this.scatterContainer)
this.scatterContainer.addChild(map.image)
this.mapview.apply(map)
map.image.addChild(this.displayObject)
// A geolayer's displayObject is on the parent layer.
@@ -309,9 +333,9 @@ export class MapLayer extends GeoLayer {
//Call transform one time manually.
this.transformed()
this.map.onTransform.add(this.transformed.bind(this))
map.onTransform.add(this.transformed)
} else {
console.error("Could not set map, it's not of type GeoMap.", map)
console.error(`Could not change map to ${name}.`)
}
/*Logging.log(`Map change: ${key}`)
@@ -368,7 +392,7 @@ export class MapLayer extends GeoLayer {
}
get map() {
return this._map
return this.mapList.map
}
/**
+23 -6
View File
@@ -291,6 +291,10 @@ export class GeoMap {
console.error('Overload get distance in subclass.')
}
set alpha(value) {
console.error('Overload get alpha in subclass.')
}
/**
* Returns a screen point for a coordinate.
*/
@@ -374,11 +378,13 @@ export class GeoMap {
* @returns {object} - Returns an object with the names as keys and the GeoMaps as value.
* @memberof GeoMap
*/
static allFromJson(json) {
static allFromJson(json, root = './') {
let error = { message: '' }
let maps = {}
if (GeoMap._validateJson(json, error)) {
for (let [mapname, data] of Object.entries(json)) {
console.log(data.tiles, data.tiles.path, root + data.tiles.path)
data.tiles.path = root + data.tiles.path
maps[mapname] = GeoMap._createMap(data)
maps[mapname].name = mapname
}
@@ -563,6 +569,7 @@ export class DeepZoomMap extends GeoMap {
super.load(image, container, scatter)
console.log('LOADED: ', this.image)
if (this.debug) console.log('Loaded image: ', image, 'With options: ', this.info)
}
@@ -622,7 +629,7 @@ export class DeepZoomMap extends GeoMap {
let containerCenter
if (this.frame) {
containerCenter = this.getFrame().center
containerCenter = this.getFrame().localCenter
} else {
containerCenter = {
x: this.image.parent.width / 2,
@@ -691,10 +698,21 @@ export class DeepZoomMap extends GeoMap {
tint() {
let color = DeepZoomMap.tintcolors[DeepZoomMap.tintcolor++ % DeepZoomMap.tintcolors.length]
this._forEachTile(tile => {
tile.tint = color
})
}
_forEachTile(callback) {
this.image.children[0].children.forEach(tiles => {
tiles.children.forEach(tile => {
tile.tint = color
})
tiles.children.forEach(callback)
})
}
setAlpha(alpha) {
this._forEachTile(tile => {
tile.alpha = alpha
})
}
@@ -769,7 +787,6 @@ export class ImageMap extends GeoMap {
* @memberof ImageMap
*/
moveTo(coordinates, zoom = null, { animate = 0 } = {}) {
if (this.image.scatter == null) {
return
}
+1 -1
View File
@@ -178,6 +178,7 @@ export default class MapApp extends PIXIApp {
selectMap(key) {
let result = this.mapList.select(key)
console.log('Select map', key, result)
if (result && this.mapLayer) {
this.mapLayer.changeMap(this.mapList.map)
@@ -287,7 +288,6 @@ export default class MapApp extends PIXIApp {
}
get map() {
console.log(this.mapList)
return this.mapList.map
}
+13 -4
View File
@@ -1,5 +1,5 @@
export class MapList {
constructor(active, maps) {
constructor(active = null, maps = {}) {
this.maps = maps
this.active = active
@@ -40,6 +40,16 @@ export class MapList {
return map
}
clone() {
let maps = {}
for (let name of Object.keys(this.maps)) {
maps[name] = this.maps[name].clone()
}
return new MapList(this.active, maps)
}
add(key, map) {
if (this.maps[key] != null) consol.warn('Key already in mapList. The existing key was overwritten.')
map.name = key
@@ -47,15 +57,14 @@ export class MapList {
}
get map() {
console.log(this.maps, this.active)
return this.maps[this.active]
return this.maps && this.maps[this.active] ? this.maps[this.active] : null
}
next() {
let keys = Object.keys(this.maps)
let idx = keys.indexOf(this.active)
let next = idx + 1 < key.length ? keys[idx + 1] : keys[0]
let next = idx + 1 < keys.length ? keys[idx + 1] : keys[0]
console.log(keys, idx, next)
return next
}
+24 -7
View File
@@ -89,15 +89,15 @@ export class AdvancedScatterContainer extends ScatterContainer {
let interactionManager = this.renderer.plugins.interaction
let displayObject = interactionManager.hitTest(local, this)
if (displayObject.dontBlockScatter && displayObject.parent != null) {
displayObject = interactionManager.hitTest(local, displayObject.parent)
if (displayObject != null) {
if (displayObject.dontBlockScatter && displayObject.parent != null) {
displayObject = interactionManager.hitTest(local, displayObject.parent)
}
if (displayObject.scatter != null) this.hitScatter = displayObject.scatter
if (this.claimEvents) event.claimedByScatter = this.hitScatter
}
if (displayObject != null && displayObject.scatter != null) this.hitScatter = displayObject.scatter
if (this.claimEvents) event.claimedByScatter = this.hitScatter
return this.hitScatter
}
}
@@ -255,6 +255,23 @@ class AdvancedScatter extends DisplayObjectScatter {
}
export class SubmapScatter extends DisplayObjectScatter {
constructor(displayObject, renderer, opts = {}) {
/*
Currently the submaps are only working on one scale to
avoid recalculations of the shown map.
Therfore we force the scatter to not be scaleable.
*/
Object.assign(opts, {
minScale: 1,
maxScale: 1,
startScale: 1,
scalable: false
})
super(displayObject, renderer, opts)
}
get width() {
return this.displayObject.width * this.displayObject.scale.x
}