npm.io
0.0.1 • Published 4 years ago

yrfe-temp

Licence
MIT
Version
0.0.1
Deps
3
Size
1.2 MB
Vulns
0
Weekly
0
SummaryDependencyVersions

yrui-flow-editor

yrui-flow-editor是一个流程设计器,依赖于react，react-dom。

Index

Install

使用 npm 或 yarn 安装
$ npm install yrui-flow-editor --save
yarn add yrui-flow-editor
浏览器引入

在浏览器中使用 script 和 link 标签直接引入文件，并使用全局变量window['yrui-flow-editor']

Usage

using Umd build
<!DOCTYPE html>
<html>
  <head>
    <title>Form Design</title>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <style type="text/css">
      #root,
      #root > div {
        display: flex;
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
    </style>
    <link type="text/css" rel="styleSheet" href="path/yrui-flow-editor/dist/index.css" />
  </head>
  <body>
    <div id="root"></div>
    <script
      crossorigin
      src="https://unpkg.com/react@16.4.0/umd/react.production.min.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@16.4.0/umd/react-dom.production.min.js"
    ></script>
    <script src="path/yrui-flow-editor/dist/index.js"></script>
    <script>
      const nodesData = [
        {
          size: "80*72",
          shape: "flow-rhombus",
          color: "#13C2C2",
          label: "分叉节点fsd",
          dataType: "rhombus"
        },
        {
          size: "80*48",
          shape: "flow-capsule",
          color: "#722ED1",
          label: "模型节点sdf",
          dataType: "capsule"
        }
      ];
      const nodesAttr = {
        rhombus: [
          {
            type: "textfield",
            label: "单行文本框",
            name: "textfield",
            isRequired: "true",
            errorTip: "请输入"
          }
        ],
        capsule: [
          {
            type: "textfield",
            label: "单行文本框",
            name: "textfield",
            isRequired: "true",
            errorTip: "只支持xyz",
            regex: "[xyz]",
            flags: "i"
          }
        ]
      };
      const edgesAttr = [
        {
          type: "textfield",
          label: "单行文本框",
          name: "textfield",
          isRequired: "true",
          errorTip: "请输入"
        }
      ];
      const aa = new window["yrui-flow-editor"]({
        nodesData: nodesData,
        nodesAttr: nodesAttr,
        edgesAttr: edgesAttr,
        onSave: function(values) {
          console.log(values);
        }
      });
      const domContainer = document.getElementById("root");
      ReactDOM.render(aa.render(), domContainer);
    </script>
  </body>
</html>
using ES6 modules

import "yrui-flow-editor/dist/index.css";
import FlowPage from "yrui-flow-editor";

class App extends Component {
  state = {
    data: {
      nodes: [
        {
          checkbox: ["0"],
          color: "#FA8C16",
          dataType: "circle",
          datepicker: "2019-01-05",
          dropdown: "0",
          id: "63016fd9",
          index: 0,
          label: "起止节点1",
          textfield: "textfieldtextfield",
          radio: "0",
          shape: "flow-circle",
          size: "72*72",
          textareafield: "只需向大V",
          type: "node",
          x: 191.34375,
          y: 158
        },
        {
          color: "#7d69ff",
          dataType: "circle2",
          id: "3fdf6380",
          index: 1,
          label: "起止节点2",
          shape: "flow-circle",
          size: "72*72",
          type: "node",
          x: 547.34375,
          y: 133
        }
      ],
      edges: [
        {
          checkbox: ["1"],
          datepicker: "2019-01-20",
          dropdown: "1",
          id: "2d528056",
          index: 2,
          label: "箭头1",
          textfield: "textfieldtextfield",
          radio: "0",
          shape: "flow-polyline-round",
          source: "63016fd9",
          sourceAnchor: 1,
          target: "3fdf6380",
          targetAnchor: 3,
          textareafield: "水电费水电费"
        }
      ]
    },
    nodesData: [
      {
        size: "72*72",
        shape: "flow-circle",
        color: "#FA8C16",
        label: "起止节点1",
        dataType: "circle"
      },
      {
        size: "72*72",
        shape: "flow-circle",
        color: "#7d69ff",
        label: "起止节点2",
        dataType: "circle2"
      },
      {
        size: "80*48",
        shape: "flow-rect",
        color: "#1890FF",
        label: "常规节点1",
        dataType: "rect"
      },
      {
        size: "80*72",
        shape: "flow-rhombus",
        color: "#13C2C2",
        label: "分叉节点1",
        dataType: "rhombus"
      },
      {
        size: "80*48",
        shape: "flow-capsule",
        color: "#722ED1",
        label: "模型节点1",
        dataType: "capsule"
      }
    ],
    nodesAttr: {
      circle: [
        {
          type: "textfield",
          label: "单行文本框",
          name: "textfield",
          isRequired: "true",
          errorTip: "请输入",
          onChange: (e, form) => {
            const data = this.flowPage.getCanvasData();
            form.setFieldsValue({
              textareafield: e.target.value + data.nodes[0].label
            });
          }
        },
        {
          type: "textareafield",
          label: "多行文本框",
          name: "textareafield",
          isRequired: "true",
          errorTip: "请输入"
        },
        {
          type: "datepicker",
          label: "日期",
          name: "datepicker",
          isRequired: "true"
        },
        {
          type: "checkbox",
          label: "多选框",
          name: "checkbox",
          isRequired: "true",
          options: [
            { label: "Apple", value: "0" },
            { label: "Pear", value: "1" },
            { label: "bananan", value: "2" }
          ]
        },
        {
          type: "radio",
          label: "单选框",
          name: "radio",
          isRequired: "true",
          defaultValue: "0",
          options: [
            { label: "选项一", value: "0" },
            { label: "选项二", value: "1" },
            { label: "选项三", value: "2" }
          ]
        },
        {
          type: "dropdown",
          label: "下拉框",
          name: "dropdown",
          isRequired: "true",
          options: [
            { label: "选项一", value: "0" },
            { label: "选项二", value: "1" },
            { label: "选项三", value: "2" }
          ]
        }
      ],
      rect: [
        {
          type: "textfield",
          label: "单行文本框",
          name: "textfield",
          isRequired: "true"
        }
      ],
      rhombus: [
        {
          type: "textfield",
          label: "单行文本框",
          name: "textfield",
          isRequired: "true",
          errorTip: "请输入"
        }
      ],
      capsule: [
        {
          type: "textfield",
          label: "单行文本框",
          name: "textfield",
          isRequired: "true",
          errorTip: "只支持xyz",
          regex: "[xyz]",
          flags:"i"
        }
      ]
    },
    edgesAttr: [
      {
        type: "textfield",
        label: "单行文本框",
        name: "textfield",
        isRequired: "true",
        errorTip: "请输入"
      },
      {
        type: "textareafield",
        label: "多行文本框",
        name: "textareafield",
        isRequired: "true",
        errorTip: "请输入"
      },
      {
        type: "datepicker",
        label: "日期",
        name: "datepicker",
        isRequired: "true"
      },
      {
        type: "checkbox",
        label: "多选框",
        name: "checkbox",
        isRequired: "true",
        options: [
          { label: "Apple", value: "0" },
          { label: "Pear", value: "1" },
          { label: "bananan", value: "2" }
        ]
      },
      {
        type: "radio",
        label: "单选框",
        name: "radio",
        isRequired: "true",
        defaultValue: "0",
        options: [
          { label: "选项一", value: "0" },
          { label: "选项二", value: "1" },
          { label: "选项三", value: "2" }
        ]
      },
      {
        type: "dropdown",
        label: "下拉框",
        name: "dropdown",
        isRequired: "true",
        options: [
          { label: "选项一", value: "0" },
          { label: "选项二", value: "1" },
          { label: "选项三", value: "2" }
        ]
      }
    ]
  };
  save = values => {
    console.log(values);
  };
  getFlowPage = comp => {
    this.flowPage = comp;
  };
  render() {
    const { data, nodesAttr, nodesData, edgesAttr } = this.state;
    return (
      <FlowPage
        data={data}
        nodesAttr={nodesAttr}
        nodesData={nodesData}
        edgesAttr={edgesAttr}
        onSave={this.save}
        ref={this.getFlowPage}
      />
    );
  }
}
ReactDOM.render(<App />,mountNode);

API

FlowPage

一个流程设计器。

参数 说明 类型 默认值
data 设计器数据。当是函数时，需返回指定格式的数据 object | function { nodes: [], edges: [] }
nodesData node数据 array | object -
nodesAttr 当前node点属性项 object -
edgesAttr 连接线属性项 array -
groupsAttr 群组属性项 array -
otherPanelTitle 底部面板title string -
onSave 点击工具栏保存按钮事件 (data)=>void -
onAfterNodeAdd 节点添加事件，节点增加后触发 ({dataMap,model})=>void -
onAfterNodeRemove 节点删除事件，节点删除后触发 ({dataMap,model})=>void -
onAfterNodeUpdate 节点数据更新事件，在节点属性或位置被更新后触发 ({dataMap,originModel,model})=>void -
onAfterEdgeAdd 连接线添加事件，连接线增加后触发 ({dataMap,model,source,target})=>void -
onAfterEdgeRemove 连接线删除事件，连接线删除后触发 ({dataMap,model,source,target})=>void -
onAfterEdgeUpdate 连接线数据更新事件，在连接线属性或位置被更新后触发 ({dataMap,originModel,model,source,target})=>void -
onDragBeforeShowAnchor 从锚点拖出边后，显示锚点前，可用作控制，要去连的锚点是否显示。 (ev)=>void -
onBeforeAddEdge 鼠标悬浮锚点后，开启添加边模式前，可用作控制，哪些锚点可添加边 (data)=>void -
getCanvasDetail 自定义画布属性 function -
getMultiDetail 自定义多选属性 function -
showTip 是否展示Node提示信息，为true时，默认展示节点label信息 boolean false
TipDescFun 自定义Node提示信息 (model)=>ReactNode -
formItemLayout label标签布局和输入控件布局样式 object {labelCol: {sm: { span: 9 }},wrapperCol: {sm: { span: 15 }}}

labelCol和wrapperCol详见Form.Item的labelCol和wrapperCol

onDragBeforeShowAnchor
const onDragBeforeShowAnchor=(ev)=>{
  // ev.sourceAnchor  源锚点
  // ev.source        源子项
  // ev.targetAnchor  目标锚点
  // ev.target        目标子项
  ev.cancel = true; // 若设置为 true 则取消显示要去连接的锚点
}
onBeforeAddEdge
const onBeforeAddEdge=()=>{
  // ev.anchor  锚点
  // ev.item    子项
  ev.cancel = true; // 若设置该锚点不会触发连接模式
}
nodesData

可自定义需展示的可拖拽node。有两种数据类型，当数据类型是object时，则代表有分组。

const nodesData={
      "起始节点": [
        {
          size: "72*72",
          shape: "flow-circle",
          color: "#FA8C16",
          label: "起止节点1",
          dataType: "circle"
        },
        {
          size: "72*72",
          shape: "flow-circle",
          color: "#7d69ff",
          label: "起止节点2fff",
          dataType: "circle2"
        }
      ],
      "其他节点": [
        {
          size: "80*48",
          shape: "flow-rect",
          color: "#1890FF",
          label: "常规节点sdfsdf",
          dataType: "rect"
        },
        {
          size: "80*72",
          shape: "flow-rhombus",
          color: "#13C2C2",
          label: "分叉节点1sfsd",
          dataType: "rhombus"
        }
      ]
    }
参数 说明 类型 默认值
dataType node点类型 string -
size 大小，格式为50*50 string -
shape 形状，内部自定义四种形状：flow-circle，flow-rect，flow-rhombus，flow-capsule string -
color 颜色 string -
label 标签名 string -
src 概览图像路径 string -
nodesAttr

可拖拽node的自定义属性。

参数 说明 类型 默认值
type 类型，默认有textfield，textareafield，datepicker，checkbox，radio，dropdown string -
label 标题 string -
name 字段名 string -
defaultValue 默认值 string|array -
disabled 是否禁用状态，默认为 false boolean false
isRequired 是否必填 string -
errorTip 错误提示信息 string -
regex 正则表达式的文本 string -
flags 正则表达式标志 string -
render 自定义表单组件 (item,form,model)=> ReactNode -
placement 放置位置，右边"right"，底部"bottom" string "bottom"
edgesAttr

连线的自定义属性。

参数 说明 类型 默认值
type 类型，默认有textfield，textareafield，datepicker，checkbox，radio，dropdown string -
label 标题 string -
name 字段名 string -
defaultValue 默认值 string|array -
disabled 是否禁用状态，默认为 false boolean false
isRequired 是否必填 string -
errorTip 错误提示信息 string -
regex 正则表达式的文本 string -
flags 正则表达式标志 string -
render 自定义表单组件 (item,form,model)=> ReactNode -
type

node的type默认有textfield(文本框)，textareafield(多行文本框)，datepicker（日期选择框）,checkbox(多选框)，radio(单选框)，dropdown(下拉框)这几种。

textfield
参数 说明 类型 默认值
onChange 输入框内容变化时的回调 function(e:Event,form) -
textareafield
参数 说明 类型 默认值
onChange 输入框内容变化时的回调 function(e:Event,form) -
datepicker

mode仅在type为datepicker时可传。

参数 说明 类型 默认值
mode 类型，默认有month，year，week，range string -
onChange 时间发生变化的回调 function(dateStrings: string | [string, string],form) -
checkbox

当type为checkbox时，可传options。选中的数据格式为['Apple']

参数 说明 类型 默认值
options 格式为[{ label: 'Apple', value: 'Apple',disabled: false }] 或函数，当是函数时，需返回指定格式 array |function -
fieldNames 自定义 options 中 label value disabled 字段 object -
onChange 变化时回调函数 function(value,form) -
radio

当type为radio时，可传options。

参数 说明 类型 默认值
options 格式为[{ label: 'Apple', value: 'Apple',disabled: false }] 或函数，当是函数时，需返回指定格式 array |function -
fieldNames 自定义 options 中 label value disabled 字段 object -
onChange 选项变化时的回调函数 function(e:Event,form) -
dropdown

当type为radio时，可传options。

参数 说明 类型 默认值
options 格式为[{ label: 'Apple', value: 'Apple'}] 或函数，当是函数时，需返回指定格式 array |function -
fieldNames 自定义 options 中 label value 字段 object { label: "label", value: "value" }
mode 为多选或标签 'multiple' | 'tags' -
onChange 选中option时调用此函数。当mode为multiple或tags时，value为[string, string]类型，否则，value为string类型 function(value:string | [string, string],form) -

Compatibility

该插件支持chrome，firefox最新两个版本。

License

Licensed under the MIT License

Keywords

reactreact-componentcomponentcomponentsfrontend