From b6468c97166a649147c476767cfc78cd86ac9b41 Mon Sep 17 00:00:00 2001
From: Junjie <xjj@123>
Date: 星期一, 11 三月 2024 08:38:20 +0800
Subject: [PATCH] #
---
zy-asrs-flow/src/components/Flow/GraphDrawer.jsx | 110 +++++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 94 insertions(+), 16 deletions(-)
diff --git a/zy-asrs-flow/src/components/Flow/GraphDrawer.jsx b/zy-asrs-flow/src/components/Flow/GraphDrawer.jsx
index 00cd43f..df442c5 100644
--- a/zy-asrs-flow/src/components/Flow/GraphDrawer.jsx
+++ b/zy-asrs-flow/src/components/Flow/GraphDrawer.jsx
@@ -1,31 +1,89 @@
import React, { useRef, useEffect, useState } from "react";
-import { Button, Drawer, Input } from 'antd';
+import { Button, Drawer, Input, Switch } from 'antd';
+import { initNodeData } from "./GraphConfig";
+import './GrapDrawer.less';
const { TextArea } = Input;
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 [codeContent,setCodeContent] = useState(null);
-
- const showDrawer = (graph, node) => {
+ 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 onClose = (e) => {
+ 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);
- console.log(codeContent);
+ setCodeContent(null);
};
- const textAreaChange = (e) => {
+ 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(() => {
@@ -34,21 +92,41 @@
if (!init) {
graph.on("node:dblclick", ({ node }) => {
- console.log(node);
- showDrawer(graph, node);
+ showNodeDrawer(graph, node);
+ })
+ graph.on("edge:dblclick", ({ edge }) => {
+ showEdgeDrawer(graph, edge);
})
setInit(true);
}
}
})
- if(nodeData){
+ 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 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>
</>
);
--
Gitblit v1.9.1