|  |  |  | 
|---|
|  |  |  | }, 200).start(); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | rotateMap = () => { | 
|---|
|  |  |  | rotateMap = (value = 0) => { | 
|---|
|  |  |  | const bounds = this.mapContainer.getLocalBounds(); | 
|---|
|  |  |  | const centerX = bounds.x + bounds.width / 2; | 
|---|
|  |  |  | const centerY = bounds.y + bounds.height / 2; | 
|---|
|  |  |  | this.mapContainer.pivot.set(centerX, centerY); | 
|---|
|  |  |  | this.mapContainer.position.set(this.app.renderer.width / 2, this.app.renderer.height / 2); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const rotationIncrement = Math.PI / 2; // 90 degrees in radians | 
|---|
|  |  |  | const newRotation = this.mapContainer.rotation + rotationIncrement; | 
|---|
|  |  |  | const newRotation = this.mapContainer.rotation + value; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const rotationDegrees = (newRotation * 180 / Math.PI) % 360; | 
|---|
|  |  |  | this.rotationText.text = `{ ROTATION: ${rotationDegrees.toFixed(1)}° }`; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | new TWEEDLE.Tween(this.mapContainer) | 
|---|
|  |  |  | .to({ rotation: newRotation }, 200) | 
|---|
|  |  |  | .easing(TWEEDLE.Easing.Quadratic.Out) | 
|---|
|  |  |  | .onComplete(() => { | 
|---|
|  |  |  | localStorage.setItem('mapRotation', newRotation % (Math.PI * 2)); | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | .start(); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | showCoordinates = () => { | 
|---|
|  |  |  | this.coordinatesText = new PIXI.Text('{ x: 0, y: 0 }', { | 
|---|
|  |  |  | this.coordinatesText = new PIXI.Text('{ X: 0, Y: 0 }', { | 
|---|
|  |  |  | fill: this.themeMode === 'dark' ? 0xdddddd : 0x333333, | 
|---|
|  |  |  | fontSize: 13, | 
|---|
|  |  |  | fontFamily: 'Microsoft YaHei', | 
|---|
|  |  |  | 
|---|
|  |  |  | this.coordinatesText.position.set(10, 10); | 
|---|
|  |  |  | this.app.stage.addChild(this.coordinatesText); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | this.rotationText = new PIXI.Text('ROTATION: 0°', { | 
|---|
|  |  |  | fill: this.themeMode === 'dark' ? 0xdddddd : 0x333333, | 
|---|
|  |  |  | fontSize: 13, | 
|---|
|  |  |  | fontFamily: 'Microsoft YaHei', | 
|---|
|  |  |  | fontWeight: 'bold', | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | this.rotationText.name = 'rotationStr'; | 
|---|
|  |  |  | this.rotationText.position.set(10, 35); | 
|---|
|  |  |  | this.app.stage.addChild(this.rotationText); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | this.app.stage.on('pointermove', (event) => { | 
|---|
|  |  |  | const worldPos = event.data.getLocalPosition(this.mapContainer); | 
|---|
|  |  |  | this.coordinatesText.text = `{ x: ${worldPos.x.toFixed(2)}, y: ${worldPos.y.toFixed(2)} }`; | 
|---|
|  |  |  | this.coordinatesText.text = `{ X: ${worldPos.x.toFixed(2)}, Y: ${worldPos.y.toFixed(2)} }`; | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  | if (this.coordinatesText) { | 
|---|
|  |  |  | this.coordinatesText.style.fill = themeMode === 'dark' ? 0xdddddd : 0x333333; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | if (this.rotationText) { | 
|---|
|  |  |  | this.rotationText.style.fill = themeMode === 'dark' ? 0xdddddd : 0x333333; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | } | 
|---|