#

luxiaotao1123

2024-03-18 c352df43ea5eea9a84e89867eb3b03ba3b2dbb83

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

@@ -84,26 +84,29 @@
    const prevCurSpriteRef = React.useRef();

    // init func
    React.useEffect(async () => {
        player = new Player(mapRef.current, styles.dark, didClickSprite);
        setApp(player.app);
        setMapContainer(player.mapContainer);
        Utils.syncApp(player.app);
        Utils.syncMapContainer(player.mapContainer);
    React.useEffect(() => {
        const initialize = async () => {
            player = new Player(mapRef.current, styles.dark, didClickSprite);
            setApp(player.app);
            setMapContainer(player.mapContainer);
            Utils.syncApp(player.app);
            Utils.syncMapContainer(player.mapContainer);

        const handleResize = () => {
            setWindowSize({
                width: window.innerWidth,
                height: window.innerHeight,
            });
        };
        window.addEventListener('resize', handleResize);
        await Utils.fetchMapData(intl);
        setDataFetched(true);
        setModel(MapModel.OBSERVER_MODEL)
        setTimeout(() => {
            player.adaptScreen();
        }, 200)
            const handleResize = () => {
                setWindowSize({
                    width: window.innerWidth,
                    height: window.innerHeight,
                });
            };
            window.addEventListener('resize', handleResize);
            await Utils.fetchMapData(intl);
            setDataFetched(true);
            setModel(MapModel.OBSERVER_MODEL)
            setTimeout(() => {
                player.adaptScreen();
            }, 200)
        }
        initialize();
    }, []);

    // resize
@@ -115,7 +118,6 @@
        const height = contentRef.current.offsetHeight;
        app.renderer.resize(width, height);
        if (model !== MapModel.OBSERVER_MODEL) {
            player.hideGridlines();
            player.showGridlines();
        }
    }, [app, mapContainer, windowSize])
@@ -125,19 +127,19 @@
        if (!mapContainer && !dataFetched) {
            return;
        }
 
        switch (model) {
            case MapModel.OBSERVER_MODEL:
               

                player.hideGridlines();
                player.hideStarryBackground();

                player.activateMapEvent(null);

                Utils.removeSelectedEffect();
                setCurSPrite(null);
                setDeviceVisible(false);
                setSettingsVisible(false);
              

                mapContainer.children.forEach(child => {
                    Utils.viewFeature(child, setCurSPrite);
                })
@@ -188,6 +190,26 @@
        Utils.beMovable(sprite, setDidClickSprite);
    };

    // watch curSprite
    React.useEffect(() => {
        if (!mapContainer) {
            return;
        }
        prevCurSpriteRef.current = curSprite;
        if (curSprite && prevCurSprite !== curSprite) {
            Utils.removeSelectedEffect();
        }
        if (curSprite) {
            if (model === MapModel.OBSERVER_MODEL) {
                Utils.showSelectedEffect(curSprite)
                setDrawerVisible(true)
            }
        } else {
            Utils.removeSelectedEffect();
        }
    }, [curSprite]);
    const prevCurSprite = prevCurSpriteRef.current;

    // didClickSprite, stop triggers both sprite click and play's selection boxs
    React.useEffect(() => {
        player.updateDidClickSprite(didClickSprite);
@@ -217,24 +239,6 @@
        // setSpriteBySettings(null);
    }

    React.useEffect(() => {
        prevCurSpriteRef.current = curSprite;

        if (curSprite && prevCurSprite !== curSprite) {
            Utils.removeSelectedEffect();
        }

        if (curSprite) {
            if (model === MapModel.OBSERVER_MODEL) {
                Utils.showSelectedEffect(curSprite)
                setDrawerVisible(true)
            }
        } else {
            Utils.removeSelectedEffect();
        }
    }, [curSprite]);
    const prevCurSprite = prevCurSpriteRef.current;

    return (
        <>
            <Layout className={styles.layout}>
@@ -243,12 +247,15 @@
                        <Col className={styles.headerCol} span={12} style={{}}>
                            {dataFetched && (
                                <MapSearch
                                    model={model}
                                    setModel={setModel}
                                    ModelEnum={MapModel}
                                    curSprite={curSprite}
                                    setCurSPrite={setCurSPrite}
                                    setSpriteBySettings={setSpriteBySettings}
                                />
                            )}
                        </Col>
                        {/* 3C40C6 */}
                        <Col span={12} style={{ backgroundColor: '#4a69bd' }}>
                            <Flex className={styles.flex} gap={'large'} justify={'flex-end'} align={'center'}>

@@ -257,8 +264,24 @@
                                        <Button
                                            className='map-header-button'
                                            size={'large'}
                                            onClick={() => {
                                                Utils.fetchMapData(intl);
                                            onClick={async () => {
                                                await Utils.fetchMapData(intl);

                                                player.hideGridlines();
                                                player.hideStarryBackground();

                                                player.activateMapEvent(null);

                                                Utils.removeSelectedEffect();
                                                setCurSPrite(null);
                                                setDeviceVisible(false);
                                                setSettingsVisible(false);
                                                setDrawerVisible(false);

                                                mapContainer.children.forEach(child => {
                                                    Utils.viewFeature(child, setCurSPrite);
                                                })

                                            }}
                                        >
                                            <FormattedMessage id='map.load' defaultMessage='加载地图' />