#

luxiaotao1123

2024-10-08 db0554663e0a63bd0d718ae87b381481c663aab2

#

 zy-acs-flow/src/map/MapPage.jsx

@@ -23,7 +23,6 @@

const MapPage = () => {
    const mapRef = useRef();
    const contentRef = useRef();

    const [app, setApp] = useState(null);
    const [mapContainer, setMapContainer] = React.useState(null);
@@ -34,17 +33,46 @@
    const themeMode = theme.palette.mode;

    useEffect(() => {
        const initialize = async () => {
            player = new Player(mapRef.current, themeMode);
            setApp(player.app);
            setMapContainer(player.mapContainer);
        const parentElement = document.getElementById('main-content');
        if (parentElement && parentElement.classList.contains('RaLayout-content')) {
            parentElement.style.paddingLeft = '0px';
            parentElement.style.paddingRight = '0px';
        }

        initialize();

        // const initialize = async () => {
        //     player = new Player(mapRef.current, themeMode);
        //     setApp(player.app);
        //     setMapContainer(player.mapContainer);



        // }
        // initialize();

        // // resize
        // const handleResize = () => {
        //     player.resize();
        // };
        // window.addEventListener('resize', handleResize);
        // handleResize();


        // return () => {
        //     player.destroy();
        //     window.removeEventListener('resize', handleResize);
        // };
        return () => {
            player.app.destroy(true, { children: true });
            // 销毁 Pixi.js 应用
            // ...

            // 恢复父容器的内边距
            if (parentElement && parentElement.classList.contains('RaLayout-content')) {
                parentElement.style.paddingLeft = '';
                parentElement.style.paddingRight = '';
            }
        };
    }, [])
    }, [themeMode])

    const handleModeChange = (event) => {
        setMode(event.target.value);
@@ -61,7 +89,6 @@
    return (
        <Box
            sx={{
                margin: '0 -8px',
                height: '100%',
                display: 'flex',
                flexDirection: 'column',
@@ -120,17 +147,17 @@
                    flexGrow: 1,    // fill remaining of map space 
                    position: 'relative',
                    backgroundColor: '#fff',

                }}
            >
                <Box
                    ref={contentRef}
                    ref={mapRef}
                    sx={{
                        width: '100%',
                        height: '100%',
                        backgroundColor: '#e0e0e0',
                    }}
                >
                    <div ref={mapRef} />
                </Box>

                <SpeedDial

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

@@ -6,7 +6,7 @@
    constructor(dom, themeMode) {
        this.themeMode = themeMode;

        this.app = generateApp(themeMode);
        this.app = generateApp(dom, themeMode);
        dom.appendChild(this.app.view);

        globalThis.__PIXI_APP__ = this.app;
@@ -23,12 +23,22 @@
        });
    }

    resize() {
        // 如果需要在窗口大小改变时调整内容，可以在这里处理
        // 由于设置了 resizeTo，PIXI.Application 会自动调整画布尺寸
}

const generateApp = (themeMode) => {
    destroy() {
        this.app.destroy(true, { children: true });
    }

}

const generateApp = (dom, themeMode) => {
    const app = new PIXI.Application({
        background: themeMode === 'dark' ? '#2f3542' : '#f1f2f6',
        antialias: true,
        resizeTo: dom,
    })
    app.stage.eventMode = 'static';
    app.stage.hitArea = app.screen;