#

vincentlu

2026-03-23 94cb5196f4eecdc6102ef3da74087b1a8a58bc99

 zy-acs-flow/src/map/player.js

@@ -1,7 +1,10 @@
import * as PIXI from 'pixi.js';
import * as TWEEDLE from 'tweedle.js';
import * as Tool from './tool';
import star from '/img/map/star.png'
import star from '/img/map/star.png';
import { DEVICE_TYPE, MAP_MIRROR, MAP_TONES } from './constants';

const getMapTone = (mode) => mode === 'dark' ? MAP_TONES.dark : MAP_TONES.light;

export default class Player {

@@ -89,6 +92,9 @@

                    // sprite show style which be selected
                    this.mapContainer.children.forEach(child => {
                        if (child?.data?.type === DEVICE_TYPE.AREA) {
                            return;
                        }
                        if (Tool.isSpriteInSelectionBox(child, this.selectionBox)) {
                            this.selectedSprites.push(child);
                            Tool.markSprite(child);
@@ -114,6 +120,19 @@

        this.mapContainer.parent.off('mousedown');
        this.mapContainer.parent.on('mousedown', mapMultiSelectHandle)
    }

    deactivateMapMultiSelect = () => {
        if (!this.mapContainer?.parent) {
            return;
        }
        this.mapContainer.parent.off('mousedown');
        this.clearSelectedSprites();
        if (this.selectionBox) {
            this.selectionBox.clear();
            this.app?.stage.removeChild(this.selectionBox);
            this.selectionBox = null;
        }
    }

    clearSelectedSprites = () => {
@@ -149,10 +168,18 @@

            this.scale = newScale;

            this.mapContainer.scale.set(this.scale);
            this.mapContainer.scale.set(this.scale, Math.abs(this.scale));

            this.mapContainer.children.forEach(child => {
                // child.scale.set(1 / this.scale); // 防止图标变小
                // child.scale.set(1 / (this.scale * 1)); // 防止图标变小

                // switch (child.data?.type) {
                //     case DEVICE_TYPE.POINT:
                //         child.scale.set(1 / (this.scale * 20));
                //         break
                //     default:
                //         break
                // }
            });
        });
    }
@@ -206,8 +233,8 @@
        }

        this.scale = Math.min(
            this.app.renderer.width / (maxX - minX) * 0.8,
            this.app.renderer.height / (maxY - minY) * 0.8
            this.app.renderer.width / (maxX - minX) * 0.85,
            this.app.renderer.height / (maxY - minY) * 0.85,
        );

        let centerPoint = {
@@ -217,7 +244,7 @@

        new TWEEDLE.Tween(this.mapContainer.scale).easing(TWEEDLE.Easing.Quadratic.Out)
            .to({
                x: this.scale,
                x: MAP_MIRROR ? -this.scale : this.scale,
                y: this.scale
            }, 200).start();

@@ -238,7 +265,7 @@
        const newRotation = this.mapContainer.rotation + value;

        const rotationDegrees = (newRotation * 180 / Math.PI) % 360;
        this.rotationText.text = `{ rotation: ${rotationDegrees.toFixed(1)}° }`;
        this.rotationText.text = `{ ROTATION: ${rotationDegrees.toFixed(1)}° }`;

        new TWEEDLE.Tween(this.mapContainer)
            .to({ rotation: newRotation }, 200)
@@ -250,8 +277,9 @@
    }

    showCoordinates = () => {
        this.coordinatesText = new PIXI.Text('{ x: 0, y: 0 }', {
            fill: this.themeMode === 'dark' ? 0xdddddd : 0x333333,
        const tone = getMapTone(this.themeMode);
        this.coordinatesText = new PIXI.Text('{ X: 0, Y: 0 }', {
            fill: tone.textPrimary,
            fontSize: 13,
            fontFamily: 'Microsoft YaHei',
            fontWeight: 'bold',
@@ -260,8 +288,8 @@
        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,
        this.rotationText = new PIXI.Text('ROTATION: 0°', {
            fill: tone.textPrimary,
            fontSize: 13,
            fontFamily: 'Microsoft YaHei',
            fontWeight: 'bold',
@@ -272,7 +300,7 @@

        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)} }`;
        });
    }

@@ -285,8 +313,8 @@
        }

        const spacing = 30;
        const lineDefaultAlpha = .1;;
        const lineDefaultColor = 0x000000;
        const tone = getMapTone(this.themeMode);
        const { color: lineDefaultColor, alpha: lineDefaultAlpha } = tone.grid;
        for (let i = 0; i < this.app.view.width / spacing; i++) {
            const graphics = new PIXI.Graphics();
            graphics.lineStyle(1, lineDefaultColor, lineDefaultAlpha);
@@ -316,7 +344,8 @@
        }
    }

    showStarryBackground = (tint = 0x8395a7) => {
    showStarryBackground = (tint) => {
        const resolvedTint = tint ?? (this.themeMode === 'dark' ? 0x6f7d92 : 0x8395a7);
        if (!this.starryContainer) {
            this.starryContainer = generatePixiContainer('starryContainer');
            this.app.stage.addChild(this.starryContainer);
@@ -344,7 +373,7 @@
            };
            star.sprite.anchor.x = 0.5;
            star.sprite.anchor.y = 0.7;
            star.sprite.tint = tint; // filter
            star.sprite.tint = resolvedTint; // filter
            randomizeStar(star, true);
            this.starryContainer.addChild(star.sprite);
            stars.push(star);
@@ -424,20 +453,26 @@
    }

    setTheme = (themeMode) => {
        this.app.renderer.background.color = themeMode === 'dark' ? '#3a3f44' : '#f1f2f6';
        this.themeMode = themeMode;
        const tone = getMapTone(themeMode);
        this.app.renderer.background.color = tone.canvasBackground;
        if (this.coordinatesText) {
            this.coordinatesText.style.fill = themeMode === 'dark' ? 0xdddddd : 0x333333;
            this.coordinatesText.style.fill = tone.textPrimary;
        }
        if (this.rotationText) {
            this.rotationText.style.fill = themeMode === 'dark' ? 0xdddddd : 0x333333;
            this.rotationText.style.fill = tone.textPrimary;
        }
        if (this.gridLineContainer) {
            this.showGridLines();
        }
    }

}

const generateApp = (dom, themeMode) => {
    const tone = getMapTone(themeMode);
    const app = new PIXI.Application({
        background: themeMode === 'dark' ? '#3b4148' : '#f1f2f6',
        background: tone.canvasBackground,
        antialias: true,
        // resizeTo: dom,
    })
@@ -462,4 +497,4 @@
    mapContainer.name = name;
    mapContainer.data = {};
    return mapContainer;
}
}