iwmlib/lib/pixi/maps/display.js

/**
 * 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)
    }
}