Pipeline使用说明

1、在当前目录下执行：

$ npm link

2、在需要引用的项目中和node_modules同目录执行

$ npm link pipeline

3、使用 在组件中引入pipeline

import Pipeline from 'pipeline'

具体使用方法见src/app.js,或者参考http://gitlab.zhonganonline.com/project/learning/blob/menu/learning/src/containers/PipeTest.js

pipeline主要由6个配置项menuConfig,dagConfig,setNodeOptions、pipelinename、dblclickOnNode和toolbarConfig

menuConfig：左侧菜单栏的配置信息

menuConfig: {
          menu: [{                       //菜单栏配置（Array）
              key: 'home',               //菜单item的key（String）
              name: '主页',               //菜单item的显示名字（String）
              icon: 'ml-zhuanhuan',      //菜单item左侧显示的图标icon（String）
              link: '',                  //路由链接hash（String）
              childs: [{                 //子菜单配置项（Array）
                  key: '0001',
                  name: 'menu1',
                  icon: 'ml-zhuanhuan',
                  link: '',
                  draggable: true,      //是否可拖动
                  data:                 //用户需要存放的数据
              }]
          }],
          activeMenu: location.hash.replace('#/', ''),//正在被激活的item项
          style: { height: windowH - 94, flex: 'none' },//用户自定义style
          theme: 'white'    //主题色，目前有2种可选（default和white），默认为default
      },

dagConfig：右侧dag的配置信息

dagConfig: {
          global: {
              createdAt: new Date(),
              updatedAt: new Date(),
              view: {
                  center: [0, 0],
                  zoom: 0
              }
          },
          links: [],
          nodes: []
      },

setNodeOptions:在拖放后给节点设置option值方法

pipelinename:pipeline名称

dblclickOnNode:双击事件处理

toolbarConfig：顶部操作栏的配置

    toolbarConfig:{
        tools:{
            left: [{        //左侧操作按钮
                name: '删除',//按钮名称
                key: 'delete',//key值
                icon: 'ml-lajitong'//icon图标
            }, {
                name: '保存',
                key: 'save',
                icon: 'ml-baocun'
            }],
            right: ( 
                <RaisedButton label = "保存并提交" //右侧操作按钮（Element）
                    onClick = {
                        (e) => {
                            console.log(e)
                        }
                    }
                    primary = {
                        true
                    }
                \/>
            )
        },
        onClickTool:(key) => {console.log(key)}  //这里的key对应上面left中各个对象中的key
    }