#

luxiaotao1123

2024-03-06 115546eaccf194291bc3fb3458d01d7f0383859f

#

 zy-asrs-flow/src/locales/en-US/map.ts

@@ -3,8 +3,8 @@
    'map.edit.close': 'Exit Edit',
    'map.device.add': 'Add New Device',
    'map.device.oper': 'Device Settings',
    '': '',
    '': '',
    'map.model.observer': 'Observer Pattern',
    'map.model.editor': 'Editor Pattern',
    '': '',
    '': '',
    '': '',

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

@@ -1,7 +1,7 @@
import * as React from 'react'
import * as PIXI from 'pixi.js';
import { FormattedMessage, useIntl, useModel } from '@umijs/max';
import { Layout, Button, Flex, Row, Col, FloatButton } from 'antd';
import { Layout, Button, Flex, Row, Col, FloatButton, Select } from 'antd';
const { Header, Content } = Layout;
import {
    AppstoreAddOutlined,
@@ -38,17 +38,29 @@
            backgroundColor: '#F8FAFB',
            height: 'calc(100vh - 120px)'
        },
        select: {
            color: 'red',
            fontWeight: 'bold',
        }
    };
});

export const MapModel = Object.freeze({
    OBSERVER_MODEL: "1",
    MOVABLE_MODEL: "2",
    SETTINGS_MODEL: "3",
})

let player;

const Map = () => {
    const intl = useIntl();
    const { initialState, setInitialState } = useModel('@@initialState');
    const { styles } = useStyles();
    const mapRef = React.useRef();
    const contentRef = React.useRef();

    const [model, setModel] = React.useState(() => MapModel.OBSERVER_MODEL);
    const [deviceVisible, setDeviceVisible] = React.useState(false);
    const [settingsVisible, setSettingsVisible] = React.useState(false);
    const [windowSize, setWindowSize] = React.useState({
@@ -57,8 +69,6 @@
    });
    const [app, setApp] = React.useState(null);
    const [mapContainer, setMapContainer] = React.useState(null);
    const [mapEditModel, setMapEditModel] = React.useState(false);
    const [deviceSettingModel, setDeviceSettingModel] = React.useState(false);
    const [didClickSprite, setDidClickSprite] = React.useState(false);

    // init func
@@ -88,50 +98,52 @@
        app.renderer.resize(width, height);
    }, [app, mapContainer, windowSize])

    // Edit Model
    // model
    React.useEffect(() => {
        if (!mapContainer) {
            return;
        }
        if (mapEditModel) {
            player.showGridlines();
            player.activateMapEvent(Utils.MapEvent.SELECTION_BOX);
            mapContainer.children.forEach(child => {
                Utils.beMovable(child, setDidClickSprite);
            })
        } else {
            setDeviceSettingModel(false);
            player.hideGridlines();
            player.activateMapEvent(null);
            mapContainer.children.forEach(child => {
                child.off('pointerup');
                child.off('pointerdown');
                child.off('click');
            })
        }
    }, [mapEditModel]);
        switch (model) {
            case MapModel.OBSERVER_MODEL:

    // Settings Model
    React.useEffect(() => {
        if (!mapContainer) {
            return;
        }
        if (deviceSettingModel) {
            player.showStarryBackground();
                player.hideGridlines();
                player.hideStarryBackground();

            player.activateMapEvent(null);
            mapContainer.children.forEach(child => {
                Utils.beSettings(child, setSettingsVisible, setDidClickSprite);
            })
        } else {
            player.hideStarryBackground();
                player.activateMapEvent(null);

            player.activateMapEvent(Utils.MapEvent.SELECTION_BOX);
            mapContainer.children.forEach(child => {
                Utils.beMovable(child, setDidClickSprite);
            })
                mapContainer.children.forEach(child => {
                    child.off('pointerup');
                    child.off('pointermove');
                    child.off('pointerdown');
                    child.off('click');
                })
                break
            case MapModel.MOVABLE_MODEL:

                player.showGridlines();
                player.hideStarryBackground();

                player.activateMapEvent(Utils.MapEvent.SELECTION_BOX);

                mapContainer.children.forEach(child => {
                    Utils.beMovable(child, setDidClickSprite);
                })
                break
            case MapModel.SETTINGS_MODEL:

                player.showGridlines();
                player.showStarryBackground();

                player.activateMapEvent(null);

                mapContainer.children.forEach(child => {
                    Utils.beSettings(child, setSettingsVisible, setDidClickSprite);
                })
                break
            default:
                break
        }
    }, [deviceSettingModel]);
    }, [model]);

    // Add New Device
    const onDrop = (sprite, x, y) => {
@@ -161,12 +173,25 @@
                        <Col span={8} style={{ backgroundColor: '#3C40C6' }}></Col>
                        <Col span={16} style={{ backgroundColor: '#3C40C6' }}>
                            <Flex className={styles.flex} gap={'large'} justify={'flex-end'} align={'center'}>
                                <Button onClick={() => setMapEditModel(!mapEditModel)} size={'large'}>
                                    {!mapEditModel
                                        ? <span style={{ fontWeight: 'bold' }}><FormattedMessage id='map.edit' defaultMessage='编辑地图' /></span>
                                        : <span style={{ color: 'red', fontWeight: 'bold' }}><FormattedMessage id='map.edit.close' defaultMessage='退出编辑' /></span>
                                    }
                                </Button>
                                <Select
                                    className={styles.select}
                                    size={'large'}
                                    defaultValue={MapModel.OBSERVER_MODEL}
                                    style={{
                                        width: 180,
                                    }}
                                    onChange={setModel}
                                    options={[
                                        {
                                            value: MapModel.OBSERVER_MODEL,
                                            label: intl.formatMessage({ id: 'map.model.observer', defaultMessage: '观察者模式' }),
                                        },
                                        {
                                            value: MapModel.MOVABLE_MODEL,
                                            label: intl.formatMessage({ id: 'map.model.editor', defaultMessage: '编辑者模式' }),
                                        },
                                    ]}
                                />
                            </Flex>
                        </Col>
                    </Row>
@@ -188,7 +213,7 @@
                    </FloatButton.Group>

                    <FloatButton.Group
                        hidden={!mapEditModel}
                        hidden={model === MapModel.OBSERVER_MODEL}
                        trigger="hover"
                        style={{
                            right: 35,
@@ -204,11 +229,11 @@
                            }}
                        />
                        <FloatButton
                            type={deviceSettingModel ? 'primary' : 'default'}
                            type={model === MapModel.SETTINGS_MODEL ? 'primary' : 'default'}
                            tooltip={<div><FormattedMessage id='map.device.oper' defaultMessage='参数设置' /></div>}
                            icon={<SettingOutlined />}
                            onClick={() => {
                                setDeviceSettingModel(!deviceSettingModel);
                                setModel(model === MapModel.SETTINGS_MODEL ? MapModel.MOVABLE_MODEL : MapModel.SETTINGS_MODEL)
                            }}
                        />
                    </FloatButton.Group>