#

luxiaotao1123

2024-03-18 c352df43ea5eea9a84e89867eb3b03ba3b2dbb83

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

@@ -66,8 +66,7 @@
    const mapRef = React.useRef();
    const contentRef = React.useRef();

    const [curSprite, setCurSPrite] = React.useState(null);
    const [model, setModel] = React.useState(() => MapModel.OBSERVER_MODEL);
    const [model, setModel] = React.useState(null);
    const [deviceVisible, setDeviceVisible] = React.useState(false);
    const [settingsVisible, setSettingsVisible] = React.useState(false);
    const [windowSize, setWindowSize] = React.useState({
@@ -79,22 +78,35 @@
    const [didClickSprite, setDidClickSprite] = React.useState(false);
    const [spriteBySettings, setSpriteBySettings] = React.useState(null);
    const prevSpriteBySettingsRef = React.useRef();
    const [drawerVisible, setDrawerVisible] = React.useState(false);
    const [dataFetched, setDataFetched] = React.useState(false);
    const [curSprite, setCurSPrite] = React.useState(null);
    const prevCurSpriteRef = React.useRef();

    // init func
    React.useEffect(() => {
        player = new Player(mapRef.current, styles.dark, didClickSprite);
        setApp(player.app);
        setMapContainer(player.mapContainer);
        Utils.syncApp(player.app);
        Utils.syncMapContainer(player.mapContainer);
        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);
            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
@@ -106,14 +118,13 @@
        const height = contentRef.current.offsetHeight;
        app.renderer.resize(width, height);
        if (model !== MapModel.OBSERVER_MODEL) {
            player.hideGridlines();
            player.showGridlines();
        }
    }, [app, mapContainer, windowSize])

    // model
    React.useEffect(() => {
        if (!mapContainer) {
        if (!mapContainer && !dataFetched) {
            return;
        }
        switch (model) {
@@ -125,14 +136,12 @@
                player.activateMapEvent(null);

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

                mapContainer.children.forEach(child => {
                    child.off('pointerup');
                    child.off('pointermove');
                    child.off('pointerdown');
                    child.off('click');
                    Utils.viewFeature(child, setCurSPrite);
                })
                break
            case MapModel.MOVABLE_MODEL:
@@ -145,6 +154,7 @@
                Utils.removeSelectedEffect();
                setSpriteBySettings(null);
                setSettingsVisible(false);
                setDrawerVisible(false);

                mapContainer.children.forEach(child => {
                    Utils.beMovable(child, setDidClickSprite);
@@ -158,6 +168,7 @@
                player.activateMapEvent(null);

                setDeviceVisible(false);
                setDrawerVisible(false);

                mapContainer.children.forEach(child => {
                    Utils.beSettings(child, setSpriteBySettings, setDidClickSprite);
@@ -178,6 +189,26 @@
        mapContainer.addChild(sprite);
        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(() => {
@@ -208,27 +239,79 @@
        // setSpriteBySettings(null);
    }

    React.useEffect(() => {
        console.log(curSprite);
    }, [curSprite]);

    return (
        <>
            <Layout className={styles.layout}>
                <Header className={styles.header}>
                    <Row style={{ height: '100%' }}>
                        <Col className={styles.headerCol} span={12} style={{}}>
                            <MapSearch
                                curSprite={curSprite}
                                setCurSPrite={setCurSPrite}
                            />
                            {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'}>
                                <span>
                                    {curSprite?.data?.uuid}
                                </span>

                                {model === MapModel.OBSERVER_MODEL && (
                                    <>
                                        <Button
                                            className='map-header-button'
                                            size={'large'}
                                            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='加载地图' />
                                        </Button>
                                    </>
                                )}

                                {model !== MapModel.OBSERVER_MODEL && (
                                    <>
                                        <Button
                                            className='map-header-button'
                                            size={'large'}
                                            onClick={() => {
                                                Utils.clearMapData(intl);
                                            }}
                                        >
                                            <FormattedMessage id='map.clear' defaultMessage='清除地图' />
                                        </Button>
                                        <Button
                                            className='map-header-button'
                                            size={'large'}
                                            onClick={() => {
                                                Utils.saveMapData(intl);
                                            }}
                                        >
                                            <FormattedMessage id='map.save' defaultMessage='保存地图' />
                                        </Button>
                                    </>
                                )}

                                <Select
                                    className='map-header-select'
                                    size={'large'}
@@ -305,6 +388,16 @@
                </Content>
            </Layout >

            <MapDrawer
                open={drawerVisible}
                curSprite={curSprite}
                refCurr={mapRef.current}
                onCancel={() => {
                    setCurSPrite(null);
                    setDrawerVisible(false);
                }}
            />

            <Edit
                open={deviceVisible}
                onCancel={() => {