#

luxiaotao1123

2024-03-19 cc19e91661ddaf364b37bcfdca9eb048468c529f

 zy-asrs-flow/src/components/Flow/GraphDrawer.jsx

@@ -1,56 +1,16 @@
import React, { useRef, useEffect, useState } from "react";
import { Button, Drawer, Input } from 'antd';

const { TextArea } = Input;
import { GraphDrawerNode } from "./Drawer/GraphDrawerNode";
import { GraphDrawerEdge } from "./Drawer/GraphDrawerEdge";
import { GraphDrawerCrn } from "./Drawer/GraphDrawerCrn";
import './css/GrapDrawer.less';

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>
            </>
        );
    }
    return (
        <>
            <GraphDrawerNode graphRef={graphRef} isReady={isReady} />
            <GraphDrawerEdge graphRef={graphRef} isReady={isReady} />
            <GraphDrawerCrn graphRef={graphRef} isReady={isReady} />
        </>
    );
}