# yrfe-temp
> yrui-flow-editor是一个流程设计器,依赖于react，react-dom。
Latest version **0.0.1** (published 2022-08-15) · MIT license · 0 weekly downloads
## Install
```sh
npm install yrfe-temp
pnpm add yrfe-temp
yarn add yrfe-temp
bun add yrfe-temp
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.0.1 |
| Published | 2022-08-15 |
| First published | 2022-08-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 1.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | zy |
| Maintainers | yybs2015 |
| Keywords | react, react-component, component, components, frontend |
## Links
- npm: https://www.npmjs.com/package/yrfe-temp
- npm.io page: https://npm.io/package/yrfe-temp
## Dependencies (3)
- [lodash](https://npm.io/package/lodash.md) ^4.17.11
- [gg-editor-core](https://npm.io/package/gg-editor-core.md) ^1.3.1
- [ant-design-palettes](https://npm.io/package/ant-design-palettes.md) ^1.1.3
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 0.0.1 (latest) — 2022-08-15
## README
# yrui-flow-editor
yrui-flow-editor是一个流程设计器,依赖于react，react-dom。
## Index
* [Install](#install)
* [Usage](#usage)
* [API](#api)
* [Compatibility](#compatibility)
* [License](#license)
## Install
### 使用 npm 或 yarn 安装
```
$ npm install yrui-flow-editor --save
```
```
yarn add yrui-flow-editor
```
### 浏览器引入
在浏览器中使用 script 和 link 标签直接引入文件，并使用全局变量window['yrui-flow-editor']
## Usage
### using Umd build
```html
Form Design
```
### using ES6 modules
```jsx
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 (
);
}
}
ReactDOM.render(,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](https://ant.design/components/form-cn/)
#### onDragBeforeShowAnchor
```js
const onDragBeforeShowAnchor=(ev)=>{
// ev.sourceAnchor 源锚点
// ev.source 源子项
// ev.targetAnchor 目标锚点
// ev.target 目标子项
ev.cancel = true; // 若设置为 true 则取消显示要去连接的锚点
}
```
#### onBeforeAddEdge
```js
const onBeforeAddEdge=()=>{
// ev.anchor 锚点
// ev.item 子项
ev.cancel = true; // 若设置该锚点不会触发连接模式
}
```
### nodesData
可自定义需展示的可拖拽node。有两种数据类型，当数据类型是object时，则代表有分组。
```js
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
---
_Source: https://npm.io/package/yrfe-temp · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._