yrfe-temp

v0.0.1

Published

3 years ago

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

0High
0Medium
0Low

yybs2015

react react-component component components frontend

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/[email protected]/umd/react.production.min.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/[email protected]/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

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。

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

yrui-flow-editor

Index

Install

使用 npm 或 yarn 安装

浏览器引入

Usage

using Umd build

using ES6 modules

API

FlowPage

onDragBeforeShowAnchor

onBeforeAddEdge

nodesData

nodesAttr

edgesAttr

type

textfield

textareafield

datepicker

checkbox

radio

dropdown

Compatibility

License