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() } }