zy-asrs-master.git

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