#

luxiaotao1123

2024-03-30 3a9a06e078a9d08b9da5ed41d5e63ab67637c909

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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
import React, { useRef, useEffect, useState } from "react";
import { Button, Drawer, Input, Switch, AutoComplete } from 'antd';
import { CloseSquareFilled } from '@ant-design/icons';
import { initNodeData } from "../GraphConfig";
 
const { TextArea } = Input;
 
export const GraphDrawerEdge = ({ graphRef, isReady }) => {
 
    const [open, setOpen] = useState(false);
    const [init, setInit] = useState(false);
    const [edgeData, setEdgeData] = useState(null);
    const [codeContent, setCodeContent] = useState(null);
 
    const options = [
        { value: 'true' },
        { value: 'false' },
    ];
 
    const showEdgeDrawer = (graph, edge) => {
        setOpen(true);
        setEdgeData(edge);
        if (edge.data == null) {
            edge.data = initNodeData;
        }
 
        if (edge.data.codeContent != null) {
            setCodeContent(edge.data.codeContent);
        }
 
        if (edge.labels.length == 0) {
            edge.appendLabel({
                attrs: {
                    label: {
                        text: ""
                    }
                }
            })
        }
 
    }
 
    const onEdgeClose = (e) => {
        setOpen(false);
        setEdgeData(null);
        setCodeContent(null);
    };
 
    const edgeTextAreaChange = (e) => {
        setCodeContent(e.target.value);
        edgeData.data.codeContent = e.target.value;
    }
 
    const edgeDataInputChange = (value) => {
        edgeData.removeLabelAt(0);
        edgeData.appendLabel({
            attrs: {
                label: {
                    text: value
                }
            }
        })
        edgeData.data.logicBool = value == 'true' ? true : false;
    }
 
    useEffect(() => {
        if (isReady) {
            const graph = graphRef.current;
 
            if (!init) {
                graph.on("edge:dblclick", ({ edge }) => {
                    showEdgeDrawer(graph, edge);
                })
                setInit(true);
            }
        }
    })
 
    if (edgeData) {
        return (
            <>
                <Drawer title={edgeData.label} onClose={onEdgeClose} open={open} size="large">
                    <div className="graphDrawerContainer">
                        <div>ID：{edgeData.id}</div>
                        <div>
                            属性详情：
                            <AutoComplete
                                style={{
                                    width: 200,
                                }}
                                options={options}
                                filterOption={(inputValue, option) =>
                                    option.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
                                }
                                allowClear={{ clearIcon: <CloseSquareFilled /> }}
                                defaultValue={edgeData.labels[0].attrs.label.text}
                                onChange={edgeDataInputChange}
                            />
                        </div>
                        <div>根节点：<Switch checkedChildren="是" unCheckedChildren="否" checked={edgeData.data.root} /></div>
                        <div>可执行代码：</div>
                        <TextArea value={codeContent} onChange={edgeTextAreaChange} rows={10} />
                    </div>
                </Drawer>
            </>
        );
    }
}