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>
|
</>
|
);
|
}
|
}
|
