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

commited for presentation.

Browse Source
This commit is contained in:
Severin Opel
2019-12-11 15:29:59 +01:00
parent 65fac2f406
commit a85569e54d
120 changed files with 81240 additions and 622 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/pixi/maps/mapapp.js
+145 -46
View File
@@ -7,6 +7,22 @@ import { Points } from '../../utils.js'
import Logging from '../../logging.js'
import { MapList } from './maplist.js'
/**
* A PIXI.Point or object in form {x,y}.
*
* @typedef {Object} Point
* @property {number} x - Indicates whether the Courage component is present.
* @property {number} y - Indicates whether the Power component is present.
*/
/**
* A coordinate point is a PIXI.Point or object in form {x,y} that contains map coordinates
* instead of pixel values, where x represents the latitude and y the longitude.
* @typedef {Object} CoordinatePoint
* @property {number} x - Indicates whether the Courage component is present.
* @property {number} y - Indicates whether the Power component is present.
*/
/**
* MapApp is responsible for showing fullscreen
* map applications.
@@ -16,6 +32,10 @@ import { MapList } from './maplist.js'
* @extends {PIXIApp}
*/
export default class MapApp extends PIXIApp {
/**
*Creates an instance of MapApp.
* @memberof MapApp
*/
constructor(opts = {}) {
super(opts)
@@ -30,7 +50,6 @@ export default class MapApp extends PIXIApp {
coordsLogging: false,
overlays: {},
keycodes: {},
showHotkeys: false,
imageMapZoomHeight: 256, //Defines the zoomvalue 1 for all image maps inside the mapapp.
focus: null,
zoom: 1,
@@ -47,7 +66,6 @@ export default class MapApp extends PIXIApp {
this.overlayElements = new Map()
this.debug = opts.debug
this.fpsLogging = opts.fpsLogging
this.showHotkeys = opts.showHotkeys
this.keycodes = this._extractKeyCodes(opts.keycodes)
this.coordsLogging = opts.coordsLogging
this.overlays = opts.overlays
@@ -109,9 +127,15 @@ export default class MapApp extends PIXIApp {
console.log(JSON.stringify(boundaries))
}
/**
* Creates the MapLayer.
*
* @private
* @memberof MapApp
*/
_setupMapLayer() {
this.mapContainer = new PIXI.Container()
this.mapLayer = new MapLayer(this.mapList, this.scene, this.mapContainer, {
this._mapLayer = new MapLayer(this.mapList, this.scene, this.mapContainer, {
name: 'Root Map Layer',
focus: this.focus,
zoom: this.zoom,
@@ -177,12 +201,27 @@ export default class MapApp extends PIXIApp {
}
}
/**
* Relayouts the app. E.g. called when the window is resized.
*
* @param {number} width - Desired width of the app.
* @param {number} height - Desired height of the app.
* @memberof MapApp
*/
layout(width, height) {
this.scene.resize(width, height)
this.mapLayer.mapview.update()
this.onSizeChanged.call(this)
}
/**
* Overrides the sceneFactory of the PIXIApp to create a RigidScatterContainer instead of
* a regular PIXI.Container()
*
* @private
* @returns {RigidScatterContainer} - Returns the newly created RigidScatterContainer.
* @memberof MapApp
*/
sceneFactory() {
return new RigidScatterContainer(this.width, this.height, this.renderer, {
app: this,
@@ -193,6 +232,12 @@ export default class MapApp extends PIXIApp {
})
}
/**
* Changes the map to the given key.
*
* @param {string} key - Identifier of the map to change to.
* @memberof MapApp
*/
selectMap(key) {
if (this.debug) console.log('Select map', key, result)
let result = this.mapList.select(key)
@@ -214,14 +259,30 @@ export default class MapApp extends PIXIApp {
this.selectMap(key)
}
/**
* Adds a map to the maplist.
* If no map is set, the added map will be set as default.
*
* @param {string} key - Identifier for the map.
* @param {GeoMap} map - Map object to add.
* @memberof MapApp
*/
addMap(key, map) {
if (this.mapList) this.mapList.add(key, map)
else console.error('Cannot access mapLayer. It was not initialized yet.')
}
/**
* Adds multiple maps at once.
*
* @param {object} mapObject
* @memberof MapApp
*/
addMaps(mapObject) {
for (let [key, val] of Object.entries(mapObject)) {
this.addMap(key, val)
if (val instanceof GeoMap) {
this.addMap(key, val)
} else console.warn('Tried adding maps that are not og Type GeoMap.')
}
}
@@ -254,6 +315,16 @@ export default class MapApp extends PIXIApp {
}
}
/**
* Returns the mapLayer of the map.
*
* @member {MapLayer}
* @memberof MapApp
*/
get mapLayer() {
return this._mapLayer
}
_doesOverlayElementExist(layer, type, name) {
let layerElements = this.overlayElements.get(layer)
return layerElements != undefined && layerElements[type] != null && layerElements[type][name] != null
@@ -276,7 +347,9 @@ export default class MapApp extends PIXIApp {
}
/**
* Copies the current coordinates to the clipboard.
* Copies the current location to the clipboard.
*
* @memberof MapApp
*/
locationToClipboard() {
let hidden = document.createElement('input')
@@ -289,6 +362,15 @@ export default class MapApp extends PIXIApp {
document.body.removeChild(hidden)
}
/**
* Can be used to copy polygons to the clipboard.
*
* Useful for debugging or to roughly trace a shape in the map.
* The generated pointarray can be used as geometry of a geographic
* or inside an overlay to draw that shape onto the map.
*
* @memberof MapApp
*/
pathToClipboard() {
let hidden = document.createElement('input')
document.body.appendChild(hidden)
@@ -312,25 +394,27 @@ export default class MapApp extends PIXIApp {
document.body.removeChild(hidden)
}
/**
* Returns the active map.
*
* @readonly
* @memberof MapApp
*/
get map() {
return this.mapList.map
}
get activeMapKey() {
return this.mapLayer.active
}
getRelativePosition(x, y) {
return {
x: x * app.width,
y: y * app.height
}
}
clearDrawData() {
this.drawData = []
}
/**
* Logs a text field on the map.
* The text element is a DOMElement.
*
* @param {string} msg - Message to log.
* @memberof MapApp
*/
showNotification(msg) {
let notification = document.createElement('div')
notification.classList.add('notification')
@@ -373,8 +457,25 @@ export default class MapApp extends PIXIApp {
})
}
_currentLocationToString() {}
/**
* @typedef KeyCode
* @type {object}
* @property {string} key - an ID.
* @property {boolean} altKey - Defines if KeyCode requires the alt key to be pressed.
* @property {boolean} shiftKey - Defines if KeyCode requires the shift key to be pressed.
* @property {boolean} ctrlKey - Defines if KeyCode requires the ctrl key to be pressed.
*
*/
/**
* Check's if a key event matches a defined KeyCode.
*
* @private
* @param {KeyboardEvent} event - Event that is fired on keydown, -pressed or -up.
* @param {KeyCode} keyCode - KeyCode is an object in the form of : {key:number, altKey:boolean,shiftKey:boolean,ctrlKey:boolean }
* @returns {boolean} - True, when the event matches the keycode, false otherwise.
* @memberof MapApp
*/
_matchKeyCode(event, keyCode) {
// If keycode does not exist or is invalid - return.
if (!keyCode || keyCode.key == null) return false
@@ -396,6 +497,13 @@ export default class MapApp extends PIXIApp {
})
}
/**
* Checks on every key down if it matches a keycode.
*
* @private
* @param {KeyboardEvent} event
* @memberof MapApp
*/
_checkForKeyCode(event) {
if (this._matchKeyCode(event, this.keycodes.copyCoordinate)) {
event.preventDefault()
@@ -454,10 +562,28 @@ export default class MapApp extends PIXIApp {
this.drawMode = this.DRAW_MODES.PIXI_POINT
}
_extractKeyCodes(keycodeText) {
/**
* @typedef KeyCodePairs
* @type {object}
* @property {string} name - Name of the KeyCode.
* @property {KeyCode} keyCode - KeyCode
*
*/
/**
* Extracts keycodes from a string.
*
* KeycodeStrings may look like this 'ctrl+shift+b'
*
* @private
* @param {KeyCodePairs} nameKeyCodePairs
* @returns {array} - Returns an array of KeyCode objects.
* @memberof MapApp
*/
_extractKeyCodes(nameKeyCodePairs) {
let out = {}
for (let [name, combinationString] of Object.entries(keycodeText)) {
for (let [name, combinationString] of Object.entries(nameKeyCodePairs)) {
let keys = combinationString.split('+')
out[name] = {
key: null,
@@ -528,34 +654,7 @@ export default class MapApp extends PIXIApp {
const center = submap.center
const radius = submap.container.width / 2
const distance = Points.distance(center, event.data.global) / submap.scatter.scale
if (distance > radius) {
//submap.resize((distance) * 2, .2)
//submap.centerAt(myevent.center)
}
}
// for (const submap of this.submaps) {
// const center = submap.center
// const radius = submap.container.width / 2
// const distance = Points.distance(center, event.data.global) / submap.scatter.scale
// const inside = distance < radius + 10
// console.log(distance, radius)
// if (inside) {
// // (this.width + 80) / 2 * this.scatter.scale
// //const width = (submap.width + 80) / 2 * submap.scatter.scale
// //console.log(width)
// if (distance > radius) {
// submap.resize((distance) * 2, .2)
// }
// } else {
// if (distance < radius + 20) {
// //submap.resize((distance - 30) * 2, .2)
// }
// }
// }
}
}