feat: 动态节点调整

packages/yili-dag/src/ScriptNodeInfo.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { MinusCircleOutlined, PlusCircleOutlined, EditOutlined } from '@ant-design/icons';
 import { Node } from '@antv/x6';
-import { Button, Form, Input, Space, Modal, Collapse, Table, Empty} from 'antd';
+import { Button, Form, Input, Space, Modal, Collapse, Table, Empty, message} from 'antd';
 import type { ColumnsType } from 'antd/es/table';
 import ScriptEditor from './ScriptEditor';
 
@@ -124,7 +124,9 @@ export default class ScriptNodeInfo extends React.Component<any, any> {
     this.state = {
       scriptModalVisible: false,
       checking: false,
-      inputNumber: 0
+      inputNumber: 0,
+      outputData: [],
+      outputEditing: false
     }
   }
   
@@ -149,12 +151,11 @@ export default class ScriptNodeInfo extends React.Component<any, any> {
   }
 
   componentDidMount(): void {
-    this.setState({inputNumber: this.props.nodeInfo.inputNumber})
-    console.log('propData:', this.props.nodeInfo.outputData);
+    this.setState({inputNumber: this.props.nodeInfo.inputNumber, outputData: this.props.nodeInfo.outputData})
   }
 
   // 添加输入端点
-  addInputPorts = (node: Node, number: number) => {
+  updateInputPorts = (node: Node, number: number) => {
     const currentInputPortsNumber = node.getPorts().reduce((pre: number, item: any) => {
       return item.group === 'top' ? pre + 1 : pre
     }, 0)
@@ -167,15 +168,15 @@ export default class ScriptNodeInfo extends React.Component<any, any> {
   }
 
   // 更新输入数量
-  updateNumber(inputNumber: number) {
+  updateNumber = (inputNumber: number) => {
     const id = this.props.nodeInfo.id
     const node = this.props.graph.getCellById(id)
     this.setState({inputNumber})
     this.props.nodeInfo.inputNumber = inputNumber
-    this.addInputPorts(node, inputNumber)
+    this.updateInputPorts(node, inputNumber)
   }
 
-  addOutputPorts(outputData: any) {
+  updateOutputPorts = (outputData: any) => {
     const id = this.props.nodeInfo.id
     const node = this.props.graph.getCellById(id)
     const currentOutputPorts = node.getPorts().reduce((pre: any, item: any) => {
@@ -194,7 +195,23 @@ export default class ScriptNodeInfo extends React.Component<any, any> {
         node.addPort({group: 'bottom', id: item.outputVar})
       }
     })
-    // console.log('currentOutputPorts:', currentOutputPorts);
+  }
+
+  enterOutputVar = (e: any) => {
+    const value = e.target.value.trim()
+    if(e.key === 'Enter' && value) {
+      // e.target.setAttribute('disabled', 'disabled')
+      this.setState({outputEditing: false})
+      // const outputData = values.outputData?.filter((item: any) => {
+      //   return item && item.outputVar
+      // })
+      // this.setState({outputData})
+      const outputData = this.state.outputData
+      outputData.push({outputVar: value})
+      this.setState({outputData})
+      this.props.nodeInfo.outputData = outputData
+      this.updateOutputPorts(outputData)
+    }
   }
 
   render() {
@@ -214,13 +231,8 @@ export default class ScriptNodeInfo extends React.Component<any, any> {
           onValuesChange={(changedValue, values) => {
             const paramText = values.paramText
             const nodeName = values.nodeName
-            const outputData = values.outputData?.filter((item: any) => {
-              return item && item.outputVar
-            })
-            this.props.nodeInfo.outputData = outputData
             this.props.nodeInfo.paramText = paramText
             this.props.nodeInfo.nodeName = nodeName
-            this.addOutputPorts(outputData)
           }}
         >
           <Form.Item name='nodeId' label="节点ID">
@@ -275,14 +287,30 @@ export default class ScriptNodeInfo extends React.Component<any, any> {
                       {...restField}
                       name={[name, 'outputVar']}
                     >
-                      <Input placeholder='请输入输出变量' />
+                      {/* <Input placeholder='请输入输出变量' onKeyUp={this.enterOutputVar}/>  */}
+                      { this.state.outputEditing && name === this.state.outputData.length ? 
+                        <Input placeholder='请输入输出变量' onKeyUp={this.enterOutputVar}/> :
+                        <Input placeholder='请输入输出变量' onKeyUp={this.enterOutputVar} disabled style={ {color: 'black', border: 'none', background: '#edf0f6'}}/>
+                      }
+                      
                     </Form.Item>
-                    <MinusCircleOutlined onClick={() => remove(name)} style={{color:'#147BD1'}}/>
+                    <MinusCircleOutlined onClick={() => {
+                      const outputData = this.state.outputData
+                      outputData.splice(name, 1)
+                      this.updateOutputPorts(outputData)
+                      return remove(name)
+                    }} 
+                      style={{color:'#147BD1'}}/>
                   </Space>
                 ))}
                 { !(this.props.nodeInfo.label === 'sql' && fields.length > 0) &&
                   <Form.Item>
                     <Button type="link" onClick={() => {
+                      if (this.state.outputEditing) {
+                        message.warning('请先确认前一个变量!')
+                        return
+                      }
+                      this.setState({outputEditing: true})
                       return add()
                     }} icon={<PlusCircleOutlined />} style={{paddingLeft: 0, paddingRight: 0}}>
                       添加输出