#

luxiaotao1123

2024-03-08 010229275a5b74169944a4a0954c42b9e2c9cc37

#

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

@@ -33,29 +33,32 @@
});

import agv from '/public/img/map/agv.svg'
import { set } from 'lodash';

const Device = (props) => {
    const { styles } = useStyles();
    const [dragging, setDragging] = useState(false);
    const [dragSprite, setDragSprite] = useState(null);
    const [dragSpriteType, setDragSpriteType] = useState(null);

    const onDragStart = (e, type) => {
        setDragging(true);
        setDragSpriteType(type);
        const sprite = PIXI.Sprite.from(agv);
        setDragSprite(sprite);
    };

    useEffect(() => {
        const handleMouseMove = (e) => {
            if (dragging) {
                props.onDrop(dragSprite, e.clientX, e.clientY);
                props.onDrop(dragSprite, dragSpriteType, e.clientX, e.clientY);
                setDragging(false);
                setDragSpriteType(null);
            }
        };
        window.addEventListener('mousemove', handleMouseMove);
        return () => window.removeEventListener('mousemove', handleMouseMove);
    }, [dragging, props.onDrop, props.onCancel]);

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

    return (
        <>
@@ -82,7 +85,7 @@
                                width='50px'
                                preview={false}
                                draggable="true"
                                onDragStart={onDragStart}
                                onDragStart={(e) => onDragStart(e, 'AGV')}
                            />
                            <div>AGV</div>
                        </Col>
@@ -92,7 +95,7 @@
                                width='50px'
                                preview={false}
                                draggable="true"
                                onDragStart={onDragStart}
                                onDragStart={(e) => onDragStart(e, 'AGV')}
                            />
                            <div>AGV</div>
                        </Col>
@@ -102,7 +105,7 @@
                                width='50px'
                                preview={false}
                                draggable="true"
                                onDragStart={onDragStart}
                                onDragStart={(e) => onDragStart(e, 'AGV')}
                            />
                            <div>AGV</div>
                        </Col>
@@ -114,7 +117,7 @@
                                width='50px'
                                preview={false}
                                draggable="true"
                                onDragStart={onDragStart}
                                onDragStart={(e) => onDragStart(e, 'AGV')}
                            />
                            <div>AGV</div>
                        </Col>
@@ -124,7 +127,7 @@
                                width='50px'
                                preview={false}
                                draggable="true"
                                onDragStart={onDragStart}
                                onDragStart={(e) => onDragStart(e, 'AGV')}
                            />
                            <div>AGV</div>
                        </Col>
@@ -134,7 +137,7 @@
                                width='50px'
                                preview={false}
                                draggable="true"
                                onDragStart={onDragStart}
                                onDragStart={(e) => onDragStart(e, 'AGV')}
                            />
                            <div>AGV</div>
                        </Col>
@@ -146,7 +149,7 @@
                                width='50px'
                                preview={false}
                                draggable="true"
                                onDragStart={onDragStart}
                                onDragStart={(e) => onDragStart(e, 'AGV')}
                            />
                            <div>AGV</div>
                        </Col>
@@ -156,7 +159,7 @@
                                width='50px'
                                preview={false}
                                draggable="true"
                                onDragStart={onDragStart}
                                onDragStart={(e) => onDragStart(e, 'AGV')}
                            />
                            <div>AGV</div>
                        </Col>
@@ -166,7 +169,7 @@
                                width='50px'
                                preview={false}
                                draggable="true"
                                onDragStart={onDragStart}
                                onDragStart={(e) => onDragStart(e, 'AGV')}
                            />
                            <div>AGV</div>
                        </Col>

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

@@ -158,12 +158,12 @@
    }, [model]);

    // Add New Device
    const onDrop = (sprite, x, y) => {
    const onDrop = (sprite, type, x, y) => {
        const { mapX, mapY } = Utils.getRealPosition(x, y, mapContainer);
        sprite.x = mapX;
        sprite.y = mapY;

        Utils.initSprite(sprite);
        Utils.initSprite(sprite, type);
        mapContainer.addChild(sprite);
        Utils.beMovable(sprite, setDidClickSprite);
    };

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

@@ -24,11 +24,13 @@
    }
}

export const initSprite = (sprite) => {
export const initSprite = (sprite, type) => {
    sprite.anchor.set(0.5);
    sprite.cursor = 'pointer';
    sprite.eventMode = 'static';
    sprite.data = {};
    sprite.data = {
        type: type
    };
}

// sprite be movable from sprite click event