0.0.1 • Published 2 years ago

yrfe-temp v0.0.1

Weekly downloads
-
License
MIT
Repository
-
Last release
2 years ago

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: [] }
nodesDatanode数据array | object-
nodesAttr当前node点属性项object-
edgesAttr连接线属性项array-
groupsAttr群组属性项array-
otherPanelTitle底部面板titlestring-
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信息booleanfalse
TipDescFun自定义Node提示信息(model)=>ReactNode-
formItemLayoutlabel标签布局和输入控件布局样式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"
        }
      ]
    }
参数说明类型默认值
dataTypenode点类型string-
size大小，格式为50*50string-
shape形状，内部自定义四种形状：flow-circle，flow-rect，flow-rhombus，flow-capsulestring-
color颜色string-
label标签名string-
src概览图像路径string-

nodesAttr

可拖拽node的自定义属性。

参数说明类型默认值
type类型，默认有textfield，textareafield，datepicker，checkbox，radio，dropdownstring-
label标题string-
name字段名string-
defaultValue默认值string|array-
disabled是否禁用状态，默认为 falsebooleanfalse
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，dropdownstring-
label标题string-
name字段名string-
defaultValue默认值string|array-
disabled是否禁用状态，默认为 falsebooleanfalse
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，rangestring-
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

reactreact-componentcomponentcomponentsfrontend
ant-design-palettesgg-editor-corelodash
@infinitebrahmanuniverse/nolb-yr@everything-registry/sub-chunk-3211
0.0.1

2 years ago