#

Junjie

2024-03-13 7049a9a623d3eb4cf589ad07f42db0a483df71ea

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

@@ -1,134 +1,16 @@
import React, { useRef, useEffect, useState } from "react";
import { Button, Drawer, Input, Switch } from 'antd';
import { initNodeData } from "./GraphConfig";
import './GrapDrawer.less';

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 [edgeData, setEdgeData] = useState(null);
    const [codeContent, setCodeContent] = useState(null);

    const showNodeDrawer = (graph, node) => {
        setOpen(true);
        setNodeData(node);
        if (node.data == null) {
            node.data = initNodeData;
        }

        if (node.data.codeContent != null) {
            setCodeContent(node.data.codeContent);
        }
    };

    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 onNodeClose = (e) => {
        setOpen(false);
        setNodeData(null);
        setCodeContent(null);
    };

    const onEdgeClose = (e) => {
        setOpen(false);
        setEdgeData(null);
        setCodeContent(null);
    };

    const nodeTextAreaChange = (e) => {
        setCodeContent(e.target.value);
        nodeData.data.codeContent = e.target.value;
    }

    const edgeTextAreaChange = (e) => {
        setCodeContent(e.target.value);
        edgeData.data.codeContent = e.target.value;
    }

    const nodeDataInputChange = (e) => {
        nodeData.label = e.target.value;
    }

    const edgeDataInputChange = (e) => {
        edgeData.removeLabelAt(0);
        edgeData.appendLabel({
            attrs: {
                label: {
                    text: e.target.value
                }
            }
        })
        edgeData.data.logicBool = e.target.value == 'true' ? true : false;
    }

    useEffect(() => {
        if (isReady) {
            const graph = graphRef.current;

            if (!init) {
                graph.on("node:dblclick", ({ node }) => {
                    showNodeDrawer(graph, node);
                })
                graph.on("edge:dblclick", ({ edge }) => {
                    showEdgeDrawer(graph, edge);
                })
                setInit(true);
            }
        }
    })

    if (nodeData) {
        return (
            <>
                <Drawer title={nodeData.label} onClose={onNodeClose} open={open} size="large">
                    <div className="graphDrawerContainer">
                        <div>ID：{nodeData.id}</div>
                        <div>组件名：<Input defaultValue={nodeData.label} onChange={nodeDataInputChange} /></div>
                        <div>根节点：<Switch checkedChildren="是" unCheckedChildren="否" checked={nodeData.data.root} /></div>
                        <div>可执行代码：</div>
                        <TextArea value={codeContent} onChange={nodeTextAreaChange} rows={10} />
                    </div>
                </Drawer>
            </>
        );
    } else if (edgeData) {
        return (
            <>
                <Drawer title={edgeData.label} onClose={onEdgeClose} open={open} size="large">
                    <div className="graphDrawerContainer">
                        <div>ID：{edgeData.id}</div>
                        <div>属性详情：<Input 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>
            </>
        );
    }
    return (
        <>
            <GraphDrawerNode graphRef={graphRef} isReady={isReady} />
            <GraphDrawerEdge graphRef={graphRef} isReady={isReady} />
            <GraphDrawerCrn graphRef={graphRef} isReady={isReady} />
        </>
    );
}