import React, { useRef, useEffect, useState } from "react";
|
import { Button, Drawer, Input } from 'antd';
|
|
const { TextArea } = Input;
|
|
export const GraphDrawer = ({ graphRef, isReady }) => {
|
|
const [open, setOpen] = useState(false);
|
|
const [init, setInit] = useState(false);
|
|
const [nodeData, setNodeData] = useState(null);
|
|
const [codeContent,setCodeContent] = useState(null);
|
|
const showDrawer = (graph, node) => {
|
setOpen(true);
|
setNodeData(node);
|
};
|
|
const onClose = (e) => {
|
setOpen(false);
|
setNodeData(null);
|
console.log(codeContent);
|
};
|
|
const textAreaChange = (e) => {
|
setCodeContent(e.target.value);
|
}
|
|
useEffect(() => {
|
if (isReady) {
|
const graph = graphRef.current;
|
|
if (!init) {
|
graph.on("node:dblclick", ({ node }) => {
|
console.log(node);
|
showDrawer(graph, node);
|
})
|
setInit(true);
|
}
|
}
|
})
|
|
if(nodeData){
|
return (
|
<>
|
<Drawer title={nodeData.label} onClose={onClose} open={open} size="large">
|
<p>ID：{nodeData.id}</p>
|
<p>可执行代码：</p>
|
<TextArea onChange={textAreaChange} rows={10} />
|
</Drawer>
|
</>
|
);
|
}
|
}
|
