#

luxiaotao1123

2024-03-02 d71bf49951b25e322b61aeb31f875002f6b59cbc

#

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

@@ -8,7 +8,6 @@
const Edit = (props) => {
    const [dragging, setDragging] = useState(false);
    const [dragSprite, setDragSprite] = useState(null);
    const { mapContainer } = props;

    useEffect(() => {
        const handleMouseMove = (e) => {

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

@@ -7,6 +7,7 @@
import { createStyles } from 'antd-style';
import Edit from './components/edit'
import * as Utils from './utils'
import Player from './player';

const useStyles = createStyles(({ token }) => {
    let dark = token.colorBgBase === '#000';
@@ -39,30 +40,19 @@
    const contentRef = React.useRef();

    const [editModalVisible, setEditModalVisible] = React.useState(false);

    const [app, setApp] = React.useState(() => {
        return new PIXI.Application({
            background: '#F8FAFB',
            antialias: true,
        })
    })
    const [mapContainer, setMapContainer] = React.useState(() => {
        const mapContainer = new PIXI.Container();
        mapContainer.name = "mapContainer";
        mapContainer.data = {};
        app.stage.addChild(mapContainer);
        return mapContainer;
    })

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

    React.useEffect(() => {

        Utils.syncApp(app);
        Utils.syncMapContainer(mapContainer);
        const player = new Player(mapRef.current);
        setApp(player.app);
        setMapContainer(player.mapContainer);
        Utils.syncApp(player.app);
        Utils.syncMapContainer(player.mapContainer);

        const handleResize = () => {
            setWindowSize({
@@ -71,38 +61,16 @@
            });
        };
        window.addEventListener('resize', handleResize);

        setTimeout(() => {
            // app init
            app.stage.eventMode = 'auto';
            app.stage.hitArea = app.screen;
            globalThis.__PIXI_APP__ = app;
            mapRef.current.appendChild(app.view);

            const texture = PIXI.Texture.from('https://pixijs.com/assets/bunny.png');
            const bunny = new PIXI.Sprite(texture);
            bunny.anchor.set(0.5);
            bunny.x = app.screen.width / 2;
            bunny.y = app.screen.height / 2;

            mapContainer.addChild(bunny);

            app.ticker.add((delta) => {
                bunny.rotation -= 0.01 * delta;
            });

            return () => {
                app.destroy(true, true);
            }
        }, 300)

    }, []);

    React.useEffect(() => {
        if (!app) {
            return;
        }
        const width = contentRef.current.offsetWidth;
        const height = contentRef.current.offsetHeight;
        app.renderer.resize(width, height);
    }, [windowSize]);
    }, [app, mapContainer, windowSize])

    const editHandle = () => {
        setEditModalVisible(true);
@@ -135,7 +103,6 @@
                }}
                refCurr={mapRef.current}
                onDrop={onDrop}
                mapContainer={mapContainer}
            />
        </>
    )

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

New file
@@ -0,0 +1,36 @@
import * as PIXI from 'pixi.js';
import * as TWEEDLE from 'tweedle.js';

export default class Player {

    constructor(dom) {
        this.app = generatePixiApp();
        dom.appendChild(this.app.view);

        globalThis.__PIXI_APP__ = this.app;
        
        this.mapContainer = generatePixiContainer('mapContainer');
        this.app.stage.addChild(this.mapContainer);
    }




}

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

function generatePixiContainer(name) {
    const mapContainer = new PIXI.Container();
    mapContainer.name = name;
    mapContainer.data = {};
    return mapContainer;
}