iwmlib/lib/pixi/maps/display.js

114 lines
3.2 KiB
JavaScript

/**
* The class CoordinateDisplay shows the coordinates of the center of the sceen
* in the top left of the renderer.
*
* @private
* @class
* @extends PIXI.Graphics
* @see {@link http://pixijs.download/dev/docs/PIXI.Graphics.html|PIXI.Graphics}
*/
export class CoordinateDisplay extends PIXI.Graphics {
/**
* Creates an instance of a CoordinateDisplay.
*
* @constructor
* @param {MapApp} mapApp - The MapApp where the coordinates should be displayed.
*/
constructor(mapApp) {
super()
this.app = mapApp
this.crosshair = new PIXI.Graphics()
this.outerSize = 15
this.innerSize = 5
this.thickness = 2
this.color = 0xe73230
this.crosshair.lineStyle(this.thickness, this.color)
this.crosshair.moveTo(-this.outerSize, 0)
this.crosshair.lineTo(-this.innerSize, 0)
this.crosshair.moveTo(this.innerSize, 0)
this.crosshair.lineTo(this.outerSize, 0)
this.crosshair.moveTo(0, -this.outerSize)
this.crosshair.lineTo(0, -this.innerSize)
this.crosshair.moveTo(0, this.innerSize)
this.crosshair.lineTo(0, this.outerSize)
this.text = new PIXI.Text(
'Pending ...',
new PIXI.TextStyle({
fontFamily: 'Arial',
fontSize: 14,
fontWeight: 'bold',
fill: '#f6f6f6',
stroke: '#434f4f',
strokeThickness: 3
})
)
this.refreshCoordinates()
this.yOffset = 20
this.volume = 32
this.margin = 5
this._updateFrame()
this.text.position.set(20 + this.margin, this.yOffset + this.volume + 2 * this.margin)
this.addChild(this.text)
this.addChild(this.crosshair)
this.setCrosshair()
window.setInterval(this.refreshCoordinates.bind(this), 300)
}
_updateFrame() {
this.clear()
this.lineStyle(3, 0x434f4f, 1)
.beginFill(0x434f4f, 0.6)
.drawRoundedRect(20, this.yOffset + this.volume + this.margin, this.text.width + 2 * this.margin, 32, 5)
.endFill()
}
toggleCrosshair() {
if (this.crosshair.parent) this.disableCrosshair()
else this.enableCrosshair()
}
enableCrosshair() {
this.addChild(this.crosshair)
}
disableCrosshair() {
this.removeChild(this.crosshair)
}
/**
* Refreshes displayed coordinates.
*
* @return {MapApp} Returns the MapApp object for chaining.
*/
refreshCoordinates() {
if (this.app.mapLayer.mapview.focus && this.app.mapLayer.mapview.zoom) {
//TODO pass a mapview to avoid global access.
var coords = this.app.mapLayer.mapview.focus
this.setCrosshair()
this.text.text =
'Lat: ' +
coords.x.toFixed(4) +
'| Lng: ' +
coords.y.toFixed(4) +
'| Zoom: ' +
this.app.mapLayer.mapview.zoom.toFixed(2)
this._updateFrame()
}
}
setCrosshair() {
this.crosshair.position.set(this.app.center.x, this.app.center.y)
}
}