Upgrade Flow Demo

demo/src/components/EditorDetailPanel/FlowDetailPanel.js

@@ -10,6 +10,7 @@ import {
 } from '@src';
 import NodeDetail from '../NodeDetail';
 import EdgeDetail from '../EdgeDetail';
+import GroupDetail from '../GroupDetail';
 import styles from './index.scss';
 
 class FlowDetailPanel extends React.Component {
@@ -23,7 +24,7 @@ class FlowDetailPanel extends React.Component {
           <EdgeDetail />
         </EdgePanel>
         <GroupPanel>
-          <Card type="inner" title="群组属性" bordered={false} />
+          <GroupDetail/>
         </GroupPanel>
         <MultiPanel>
           <Card type="inner" title="多选属性" bordered={false} />

demo/src/components/GroupDetail/index.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import {Input,Form,Card} from 'antd';
+
+const {Item}=Form;
+
+const inlineFormItemLayout = {
+    labelCol: {
+        sm: { span: 6 },
+    },
+    wrapperCol: {
+        sm: { span: 18 },
+    },
+};
+
+class GroupDetail extends React.Component{
+    handleSubmit=()=>{
+        const {form,getSelected,updateItem}=this.props;
+
+        form.validateFieldsAndScroll((err,values)=>{
+            if(err) return;
+
+            const item=getSelected()[0];
+
+            if(!item) return;
+
+            updateItem(item,{
+                ...values
+            });
+        });
+    };
+
+    render(){
+        const {form,getSelected}=this.props;
+        const {getFieldDecorator}=form;
+        const item=getSelected()[0];
+
+        if(!item) return null;
+
+        const {label}=item.getModel();
+
+        return (
+            <Card type="inner" title="群组属性" bordered={false}>
+                <Form onSubmit={this.handleSubmit}>
+                    <Item
+                        label="组名称"
+                        {...inlineFormItemLayout}
+                    >
+                        {
+                            getFieldDecorator('label', {
+                                initialValue: label,
+                            })(<Input onKeyUp={this.handleSubmit} onBlur={this.handleSubmit}/>)
+                        }
+                    </Item>
+                </Form>
+            </Card>
+        )
+    }
+}
+
+export default Form.create()(GroupDetail);

demo/src/components/NodeDetail/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Card, Form, Input } from 'antd';
+import { Card, Form, Input,InputNumber} from 'antd';
 
 const { Item } = Form;
 
@@ -27,6 +27,8 @@ class NodeDetail extends React.Component {
         return;
       }
 
+        values.size=`${values.width}*${values.height}`;
+
       updateItem(item, {
         ...values,
       });
@@ -43,7 +45,7 @@ class NodeDetail extends React.Component {
       return null;
     }
 
-    const { label } = item.getModel();
+    const { label,color,size } = item.getModel();
 
     return (
       <Card type="inner" title="节点属性" bordered={false}>
@@ -58,6 +60,26 @@ class NodeDetail extends React.Component {
               })(<Input onBlur={this.handleSubmit} />)
             }
           </Item>
+
+            <Item label={'尺寸'} {...inlineFormItemLayout}>
+                {
+                    getFieldDecorator('width',{
+                        initialValue:size.split('*')[0],
+                    })(<InputNumber onKeyUp={this.handleSubmit} onChange={this.handleSubmit}/>)
+                }
+                {
+                    getFieldDecorator('height',{
+                        initialValue:size.split('*')[1],
+                    })(<InputNumber onKeyUp={this.handleSubmit} onChange={this.handleSubmit}/>)
+                }
+            </Item>
+            <Item label={'颜色'} {...inlineFormItemLayout}>
+                {
+                    getFieldDecorator('color',{
+                        initialValue:color
+                    })(<Input type={'color'} onBlur={this.handleSubmit} size="small"/>)
+                }
+            </Item>
         </Form>
       </Card>
     );