#

luxiaotao1123

2024-03-02 d71bf49951b25e322b61aeb31f875002f6b59cbc

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
import React, { useState, useRef, useEffect } from 'react';
import { Col, Form, Modal, Row, Checkbox, Image, Tree, Drawer, Space, Button, Card } from 'antd';
import { FormattedMessage, useIntl, useModel } from '@umijs/max';
import * as PIXI from 'pixi.js';
 
import agv from '/public/img/map/agv.svg'
 
const Edit = (props) => {
    const [dragging, setDragging] = useState(false);
    const [dragSprite, setDragSprite] = useState(null);
 
    useEffect(() => {
        const handleMouseMove = (e) => {
            if (dragging) {
                props.onDrop(dragSprite, e.clientX, e.clientY);
                setDragging(false);
            }
        };
        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);
        sprite.anchor.set(0.5);
        setDragSprite(sprite);
    };
 
    return (
        <>
            <Drawer
                open={props.open}
                onClose={() => {
                    props.onCancel();
                }}
                getContainer={props.refCurr}
                rootStyle={{ position: "absolute" }}
                mask={false}
                width={378}
                extra={
                    <Space>
                        <Button onClick={() => props.onCancel()}><FormattedMessage id='common.cancel' defaultMessage='取消' /></Button>
                    </Space>
                }
            >
                <Card>
                    <Image
                        src={agv}
                        width='50px'
                        preview={false}
                        draggable="true"
                        onDragStart={onDragStart}
                    />
                </Card>
            </Drawer>
        </>
    )
}
 
export default Edit;