#

luxiaotao1123

2024-03-01 2a78ab36fa70a5280d7ec9fa6e83446cda0a20be

#

 zy-asrs-flow/src/pages/map/index.jsx

@@ -9,7 +9,7 @@
const useStyles = createStyles(({ token }) => {
    return {
        layout: {
            overflow: 'hidden',
            // overflow: 'hidden',
        },
        header: {
            textAlign: 'center',
@@ -30,9 +30,9 @@
const Map = () => {
    const { initialState, setInitialState } = useModel('@@initialState');
    const { styles } = useStyles();

    const mapRef = React.useRef();
    const contentRef = React.useRef();

    const [app, setApp] = React.useState(() => {
        return new PIXI.Application({
            background: '#10ac84',
@@ -40,26 +40,34 @@
        })
    })

    const [windowSize, setWindowSize] = React.useState({
        width: window.innerWidth,
        height: window.innerHeight,
    });

    React.useEffect(() => {
        // resize
        const onResize = () => {
            if (mapRef) {
                const width = contentRef.current.offsetWidth;
                const height = contentRef.current.offsetHeight;
                app.renderer.resize(width, height);
            }
        }
        window.addEventListener('resize', onResize);
        onResize();
        const handleResize = () => {
            setWindowSize({
                width: window.innerWidth,
                height: window.innerHeight,
            });
        };
        window.addEventListener('resize', handleResize);

        // app init
        app.stage.interactive = true;
        app.stage.hitArea = app.screen;
        globalThis.__PIXI_APP__ = app;
        mapRef.current.appendChild(app.view);

    }, []);

    React.useEffect(() => {
        const width = contentRef.current.offsetWidth;
        const height = contentRef.current.offsetHeight;
        app.renderer.resize(width, height);

    }, [windowSize]);

    return (
        <>
            <Layout className={styles.layout}>