Metaverse/src/XJoystick.js

let thumbArea, puck, adt, xAddPos = 0, yAddPos = 0;

export default class XJoystick{
    constructor(o, s) {
        this._config = {
            thumbAreaSize: 0,
            puckSize: 0,
            leftPadding: 0,
            bottomPadding: 0
        },
        this.degree = 0,
        this.distance = 0,
        this._updateCount = 0,
        this.styleThumbAreaDownAlpha = .5,
        this.styleThumbAreaUpAlpha = .2,
        this.stylePuckDownAlpha = 1,
        this.stylePuckUpAlpha = .8,
        this.styleThumbAreaChickness = 3,
        this.updateStep = 10,
        this._config.thumbAreaSize = o.thumbAreaSize,
        this._config.puckSize = o.puckSize,
        this._config.leftPadding = o.leftPadding,
        this._config.bottomPadding = -o.bottomPadding,
        this._scene = s.Scene,
        this._smgr = s,
        this.drawJoystick(),
        this.addObserver()
    }
    drawJoystick() {
        adt = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI"),
        adt.renderAtIdealSize = !0,
        adt.idealHeight = window.innerHeight,
        adt.idealWidth = window.innerWidth,
        adt.clipChildren = !1,
        thumbArea = new BABYLON.GUI.Ellipse,
        thumbArea.name = "thumbArea",
        thumbArea.thickness = this.styleThumbAreaChickness,
        thumbArea.color = "white",
        thumbArea.paddingLeft = "0px",
        thumbArea.paddingRight = "0px",
        thumbArea.paddingBottom = "0px",
        thumbArea.paddingTop = "0px",
        thumbArea.background = "black",
        thumbArea.height = this._config.thumbAreaSize == null ? 100 : this._config.thumbAreaSize + "px",
        thumbArea.width = thumbArea.height,
        thumbArea.isPointerBlocker = !0,
        thumbArea.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT,
        thumbArea.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_BOTTOM,
        thumbArea.alpha = this.styleThumbAreaUpAlpha,
        thumbArea.left = this._config.leftPadding,
        thumbArea.top = this._config.bottomPadding,
        thumbArea.zIndex = 0,
        thumbArea.clipChildren = !1,
        thumbArea.clipContent = !1,
        puck = new BABYLON.GUI.Ellipse,
        puck.name = "puck",
        puck.paddingLeft = "0px",
        puck.paddingRight = "0px",
        puck.paddingBottom = "0px",
        puck.paddingTop = "0px",
        puck.height = this._config.puckSize == null ? 30 : this._config.puckSize + "px",
        puck.width = puck.height,
        puck.isPointerBlocker = !0,
        puck.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER,
        puck.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER,
        puck.isDown = !1,
        puck.background = "white",
        puck.isVisible = !0,
        puck.zIndex = 1,
        puck.clipContent = !1,
        puck.alpha = this.stylePuckUpAlpha,
        adt.addControl(thumbArea),
        thumbArea.addControl(puck)
    }
    _updatePuckPosition(o) {
        const s = this._config.thumbAreaSize / thumbArea._currentMeasure.width;
        xAddPos = o.x - thumbArea._currentMeasure.width * .5 - thumbArea._currentMeasure.left,
        yAddPos = thumbArea._currentMeasure.top - o.y + thumbArea._currentMeasure.height * .5;
        const c = Math.sqrt(xAddPos * xAddPos + yAddPos * yAddPos);
        this._updateCount > this.updateStep && (this._updateCount = 0),
        this._updateCount == 0 && (c > thumbArea._currentMeasure.width / 2 ? (puck.floatLeft = s * .5 * xAddPos * thumbArea._currentMeasure.width / c,
        puck.floatTop = s * (.5 * yAddPos * thumbArea._currentMeasure.width / c) * -1,
        puck.left = puck.floatLeft,
        puck.top = puck.floatTop) : (puck.floatLeft = xAddPos * s,
        puck.floatTop = s * yAddPos * -1,
        puck.left = puck.floatLeft,
        puck.top = puck.floatTop)),
        this._updateCount++
    }
    addObserver() {
        this.onMoveObserver = adt.rootContainer.onPointerMoveObservable.add(o=>{
            this._onMoveFunc && this._onMoveFunc(),
            puck.isDown && this._updatePuckPosition(o)
        }
        ),
        this.onStopObserver = thumbArea.onPointerUpObservable.add(o=>{
            puck.isDown = !1,
            this._smgr.playerController.puckActive = !1,
            this._onEndFunc && this._onEndFunc(),
            thumbArea.alpha = this.styleThumbAreaUpAlpha,
            puck.alpha = this.stylePuckUpAlpha,
            this._resetPunkPosition()
        }
        ),
        this.onStartObserver = thumbArea.onPointerDownObservable.add(o=>{
            puck.isDown = !0,
            this._smgr.playerController.puckActive = !0,
            this._onStartFunc && this._onStartFunc(),
            this._updatePuckPosition(o),
            thumbArea.alpha = this.styleThumbAreaDownAlpha,
            puck.alpha = this.stylePuckDownAlpha
        }
        ),
        this._scene || console.error("[Engine] joystick cannot find root scene!"),
        this._scene.registerBeforeRender(()=>{
            this.distance = Math.sqrt(xAddPos * xAddPos + yAddPos * yAddPos),
            xAddPos > 0 && yAddPos > 0 ? this.degree = Math.atan(yAddPos / xAddPos) * 180 / Math.PI : xAddPos < 0 && yAddPos > 0 ? this.degree = Math.atan(yAddPos / xAddPos) * 180 / Math.PI + 180 : xAddPos < 0 && yAddPos < 0 ? this.degree = Math.atan(yAddPos / xAddPos) * 180 / Math.PI + 180 : xAddPos > 0 && yAddPos < 0 && (this.degree = Math.atan(yAddPos / xAddPos) * 180 / Math.PI + 360)
        }
        )
    }
    removeObserver() {
        this.onStartObserver && thumbArea.onPointerDownObservable.remove(this.onStartObserver),
        this.onMoveObserver && thumbArea.onPointerDownObservable.remove(this.onMoveObserver),
        this.onStopObserver && thumbArea.onPointerDownObservable.remove(this.onStopObserver)
    }
    _resetPunkPosition() {
        xAddPos = 0,
        yAddPos = 0,
        puck.floatLeft = 0,
        puck.left = 0,
        puck.floatTop = 0,
        puck.top = 0
    }
    show() {
        this.addObserver(),
        this._resetPunkPosition(),
        adt.rootContainer.isVisible = !0
    }
    hide() {
        this.removeObserver(),
        this._resetPunkPosition(),
        this._smgr.playerController.puckActive = !1,
        adt.rootContainer.isVisible = !1
    }
    onMove(o) {
        this._onMoveFunc = o
    }
    onStart(o) {
        this._onStartFunc = o
    }
    onEnd(o) {
        this._onEndFunc = o
    }
    dispose() {
        this.removeObserver(),
        adt.dispose(),
        puck.dispose(),
        thumbArea.dispose()
    }
}