#

luxiaotao1123

2024-03-02 7da70d4da6dac84ac08d65714c3733357b842b53

#

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

@@ -7,14 +7,14 @@

const Edit = (props) => {
    const [dragging, setDragging] = useState(false);
    const [dragImage, setDragImage] = useState(null);
    
    const [dragSprite, setDragSprite] = useState(null);
    const { mapContainer } = props;

    useEffect(() => {
        const handleMouseMove = (e) => {
            if (dragging) {
                props.onDrop(e.clientX, e.clientY);
                props.onDrop(dragSprite, e.clientX, e.clientY);
                setDragging(false);
                props.onCancel();
            }
        };
        window.addEventListener('mousemove', handleMouseMove);
@@ -23,6 +23,10 @@

    const onDragStart = (e) => {
        setDragging(true)
        props.onCancel();
        const sprite = PIXI.Sprite.from(agv);
        sprite.anchor.set(0.5);
        setDragSprite(sprite);
    };

    return (

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

@@ -45,16 +45,18 @@
            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,
    });

    let mapContainer = new PIXI.Container();
    mapContainer.name = "mapContainer";
    mapContainer.data = {};
    app.stage.addChild(mapContainer);

    React.useEffect(() => {
        const handleResize = () => {
@@ -101,12 +103,12 @@
        setEditModalVisible(true);
    }

    const onDrop = (x, y) => {
        const bunny = PIXI.Sprite.from('https://pixijs.io/examples/examples/assets/bunny.png');
        bunny.anchor.set(0.5);
        bunny.x = x;
        bunny.y = y;
        app.stage.addChild(bunny);
    const onDrop = (sprite, x, y) => {
        const rect = app.view.getBoundingClientRect();
        sprite.anchor.set(0.5);
        sprite.x = x - rect.left;
        sprite.y = y - rect.top;
        mapContainer.addChild(sprite);
    }

    return (
@@ -131,6 +133,7 @@
                }
                refCurr={mapRef.current}
                onDrop={onDrop}
                mapContainer={mapContainer}
            />
        </>
    )