Merge remote-tracking branch 'origin/master'

Junjie

2024-03-04 c9c8b33b9a3534f0e4a0be6bbed291163807ac66

Merge remote-tracking branch 'origin/master'

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

@@ -1,3 +1,11 @@
export default {
    'map.edit': 'Edit Map',
    'map.edit': 'Edit Model',
    'map.edit.close': 'Exit Edit',
    'map.device.add': 'Add New Device',
    '': '',
    '': '',
    '': '',
    '': '',
    '': '',
    '': '',
}

 zy-asrs-flow/src/pages/map/components/device.jsx

File was renamed from zy-asrs-flow/src/pages/map/components/edit.jsx
@@ -34,7 +34,7 @@

import agv from '/public/img/map/agv.svg'

const Edit = (props) => {
const Device = (props) => {
    const { styles } = useStyles();
    const [dragging, setDragging] = useState(false);
    const [dragSprite, setDragSprite] = useState(null);
@@ -178,4 +178,4 @@
    )
}

export default Edit;
export default Device;

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

@@ -1,17 +1,23 @@
import * as React from 'react'
import * as PIXI from 'pixi.js';
import { FormattedMessage, useIntl, useModel } from '@umijs/max';
import { Layout, Button, Flex, } from 'antd';
import { Layout, Button, Flex, Row, Col, FloatButton } from 'antd';
const { Header, Content } = Layout;
import {
    AppstoreAddOutlined,
    FileAddOutlined,
    CompressOutlined,
} from '@ant-design/icons';
import './index.css'
import { createStyles } from 'antd-style';
import Edit from './components/edit'
import Edit from './components/device'
import * as Utils from './utils'
import Player from './player';

const useStyles = createStyles(({ token }) => {
    let dark = token.colorBgBase === '#000';
    return {
        dark: dark,
        layout: {
            overflow: 'hidden',
        },
@@ -29,9 +35,11 @@
        content: {
            backgroundColor: '#F8FAFB',
            height: 'calc(100vh - 120px)'
        }
        },
    };
});

let player;

const Map = () => {
    const { initialState, setInitialState } = useModel('@@initialState');
@@ -39,16 +47,17 @@
    const mapRef = React.useRef();
    const contentRef = React.useRef();

    const [editModalVisible, setEditModalVisible] = React.useState(false);
    const [deviceVisible, setDeviceVisible] = React.useState(false);
    const [windowSize, setWindowSize] = React.useState({
        width: window.innerWidth,
        height: window.innerHeight,
    });
    const [app, setApp] = React.useState(null)
    const [mapContainer, setMapContainer] = React.useState(null)
    const [app, setApp] = React.useState(null);
    const [mapContainer, setMapContainer] = React.useState(null);
    const [mapEditModel, setMapEditModel] = React.useState(false);

    React.useEffect(() => {
        const player = new Player(mapRef.current);
        player = new Player(mapRef.current, styles.dark);
        setApp(player.app);
        setMapContainer(player.mapContainer);
        Utils.syncApp(player.app);
@@ -72,9 +81,16 @@
        app.renderer.resize(width, height);
    }, [app, mapContainer, windowSize])

    const editHandle = () => {
        setEditModalVisible(true);
    }
    React.useEffect(() => {
        if (!mapContainer) {
            return;
        }
        if (mapEditModel) {
            player.showGridlines();
        } else {
            player.hideGridlines();
        }
    }, [mapEditModel]);

    const onDrop = (sprite, x, y) => {
        const { mapX, mapY } = Utils.getRealPosition(x, y, mapContainer);
@@ -87,19 +103,60 @@
        <>
            <Layout className={styles.layout}>
                <Header className={styles.header}>
                    <Flex className={styles.flex} gap={'large'} justify={'flex-end'} align={'center'}>
                        <Button onClick={editHandle} size={'large'}><FormattedMessage id='map.edit' defaultMessage='编辑地图' /></Button>
                    </Flex>
                    <Row style={{ height: '100%' }}>
                        <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>
                            </Flex>
                        </Col>
                    </Row>
                </Header>
                <Content ref={contentRef} className={styles.content}>
                    <div ref={mapRef} style={{ position: "relative" }} />

                    <FloatButton.Group
                        shape="square"
                        style={{
                            left: 35,
                            bottom: 35
                        }}
                    >
                        <FloatButton
                            icon={<CompressOutlined />}
                        />
                        <FloatButton.BackTop visibilityHeight={0} />
                    </FloatButton.Group>

                    <FloatButton.Group
                        hidden={!mapEditModel}
                        trigger="hover"
                        style={{
                            right: 35,
                            bottom: 35
                        }}
                        icon={<AppstoreAddOutlined />}
                    >
                        <FloatButton
                            tooltip={<div><FormattedMessage id='map.device.add' defaultMessage='添加设备' /></div>}
                            icon={<FileAddOutlined />}
                            onClick={() => {
                                setDeviceVisible(true);
                            }}
                        />
                    </FloatButton.Group>
                </Content>
            </Layout>

            <Edit
                open={editModalVisible}
                open={deviceVisible}
                onCancel={() => {
                    setEditModalVisible(false);
                    setDeviceVisible(false);
                }}
                refCurr={mapRef.current}
                onDrop={onDrop}

 zy-asrs-flow/src/pages/map/player.js

@@ -6,7 +6,7 @@
    constructor(dom, dark) {
        this.darkModel = dark;
        // init
        this.app = generatePixiApp();
        this.app = generatePixiApp(dark);
        dom.appendChild(this.app.view);

        globalThis.__PIXI_APP__ = this.app;
@@ -77,6 +77,7 @@
            fontFamily: 'MicrosoftYaHei',
            fontWeight: 'bold',
        });
        coordinatesText.name = 'xyStr'
        coordinatesText.position.set(10, 10);
        this.app.stage.addChild(coordinatesText);

@@ -88,15 +89,53 @@
        this.app.view.addEventListener('mousemove', mouseMoveInfoTextHandler);
    }

    showGridlines = () => {
        if (!this.gridLineContainer) {
            this.gridLineContainer = generatePixiContainer('gridLineContainer');
            this.app.stage.addChild(this.gridLineContainer);
        }

        const inte = 30;
        const lineDefaultAlpha = .5;;
        const lineDefaultColor = 0x000000;
        for (let i = 0; i < this.app.view.width / inte; i++) {
            const graphics = new PIXI.Graphics();
            graphics.lineStyle(.3, lineDefaultColor, lineDefaultAlpha);
            graphics.beginFill(lineDefaultColor);
            graphics.moveTo(i * inte, 0);
            graphics.lineTo(i * inte, this.app.view.height);
            graphics.endFill();
            this.gridLineContainer.addChild(graphics);
        }

        for (let i = 0; i < this.app.view.height / inte; i++) {
            const graphics = new PIXI.Graphics();
            graphics.lineStyle(.3, lineDefaultColor, lineDefaultAlpha);
            graphics.beginFill(lineDefaultColor);
            graphics.moveTo(0, i * inte);
            graphics.lineTo(this.app.view.width, i * inte);
            graphics.endFill();

            this.gridLineContainer.addChild(graphics);
        }
    }

    hideGridlines = () => {
        if (this.gridLineContainer) {
            this.app.stage.removeChild(this.gridLineContainer);
            this.gridLineContainer = null;
        }
    }

    appTicker = () => {
        TWEEDLE.Group.shared.update();
    }

}

function generatePixiApp() {
function generatePixiApp(dark) {
    const app = new PIXI.Application({
        background: '#F8FAFB',
        background: dark ? '#f1f2f6' : '#f1f2f6',
        antialias: true,
    })
    app.stage.eventMode = 'auto';