{"_id":"@chenjian835/flow-designer","_rev":"1-a20d792222e22f4ea194fa0c5540130e","name":"@chenjian835/flow-designer","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@chenjian835/flow-designer","version":"1.0.0","description":"a workflow designer base on @antv/g6","main":"dist/index.js","module":"dist/index.esm.js","types":"src/index.d.ts","authors":{"name":"guozhaolong","email":"guozhaolong@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/hadoop835/wfd.git"},"scripts":{"dev":"cd example && umi dev","build":"father build"},"dependencies":{"@antv/dom-util":"^2.0.2","@antv/g-canvas":"^0.4.12","@antv/g6":"3.5.2","@antv/matrix-util":"^2.0.7","@antv/util":"~2.0.9","antd":"^4.2.5","antd-etable":"^1.3.44","moment":"^2.26.0"},"peerDependencies":{"react":"^16.12.0"},"devDependencies":{"father":"^3.0.0-alpha.1","umi":"^3.2.2"},"license":"MIT","bugs":{"url":"https://github.com/guozhaolong/wfd/issues"},"homepage":"https://github.com/guozhaolong/wfd#readme","directories":{"example":"example"},"keywords":["workflow","design","diagram"],"author":{"name":"chenjian835"},"gitHead":"6ece64b2f7b00fe44629e425ae2dc5e4b0d5f822","_id":"@chenjian835/flow-designer@1.0.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-6TywH6zYmVb7aGwC1+Gbq0ju1+42my8lK1L9fWjDe29k/xKHTiW6XOnLjk3OCC24Qx5+pHkAEL+HipzdeD/VQQ==","shasum":"8a45c716769ee85eaa74dc92ca11b0f025effbed","tarball":"https://registry.npmjs.org/@chenjian835/flow-designer/-/flow-designer-1.0.0.tgz","fileCount":37,"unpackedSize":414153,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwvP9CRA9TVsSAnZWagAAAowP/2w+Wln5CO9LJPNZWkde\noq4czgi/0Pp68Jl1oItAYLoa94mrzv6HPh6aV/325bMSNe3fl9ZP4Ud/wj8D\n5KB3WzGbfX8cBmzqSIlsR86vQq0SMP0nNX/0LOuSz7IotfAxEasqt4DowEnR\nRBgeHtgtbcfJA3i3Jj8b8cqC/UhvylCg3a1/3RIQXXEyhwiy9/+ZPbmC9kPi\nlpkskO95Tnw4WuR+twnyg/CKwW+iwW2FH7hqnREF0S8XL5SzVb18swg24Jie\nSmbpPkYd9OEB8l7tnHBZvHYnFhswakIDTGbxjP+LXG2Jxn/YRoq+nQwgkFNY\neaIZ1ZN8ii3zmPppEXDC12WdfAYA00X95yRTSGlNXJC/DoetoMqkrbLXrIZe\nX7qi0c2k726C0mq/XawqTtvvin6scHKNvK3pfs2c7wCJMN4fy+3/6toTjPFJ\nx2GlB8a6Gm7GtO+lACmbBhJixi+acf0pyB/dADsHrmWvGYXahRQKZUz76Bjx\nn3bQzqkDsi7MNJw/Z+4o2NcmumBs+kIyFF1r+ZjjHTFcCv/p+vrDgzF/hRXK\nezea8EqCgMjv85CXaWPAAQtJgxmkeHsGCF/wp6RvIvhO6AhJ3MVCgeZe1yJE\nypzP5BNkh0zFf6QFtoRFkojSXSrUb7TnjyUrm5sbkGlpAOfYUzMPOMvZa3wr\nVKaT\r\n=A+Go\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2lo0Ue7Fm1aTGfO4v+hdztO2tO4MCxB4PCZtmR4uSdQIhAPWLg8BuEsILKqK9vUIZimVgE1afDNoeDN3lxAWqvMkS"}]},"_npmUser":{"name":"chenjian835","email":"chenjian835@163.com"},"maintainers":[{"name":"chenjian835","email":"chenjian835@163.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/flow-designer_1.0.0_1640166397569_0.567780460824034"},"_hasShrinkwrap":false}},"time":{"created":"2021-12-22T09:46:37.514Z","1.0.0":"2021-12-22T09:46:37.709Z","modified":"2022-04-04T22:39:07.099Z"},"maintainers":[{"name":"chenjian835","email":"chenjian835@163.com"}],"description":"a workflow designer base on @antv/g6","homepage":"https://github.com/guozhaolong/wfd#readme","keywords":["workflow","design","diagram"],"repository":{"type":"git","url":"git+https://github.com/hadoop835/wfd.git"},"author":{"name":"chenjian835"},"bugs":{"url":"https://github.com/guozhaolong/wfd/issues"},"license":"MIT","readme":"## Workflow Designer\r\n\r\n[![NPM Version](http://img.shields.io/npm/v/wfd.svg?style=flat)](https://www.npmjs.org/package/wfd)\r\n[![NPM Downloads](https://img.shields.io/npm/dm/wfd.svg?style=flat)](https://www.npmjs.org/package/wfd)\r\n![](https://img.shields.io/badge/license-MIT-000000.svg)\r\n\r\n## Online Demo 1\r\n![image](https://github.com/guozhaolong/wfd/raw/master/example/snapshots/1.jpg)\r\n\r\nhttps://guozhaolong.github.io/wfd/\r\n\r\n## Online Demo 2\r\n![image](https://github.com/guozhaolong/wfd/raw/master/example/snapshots/2.jpg)\r\n\r\nhttps://guozhaolong.github.io/wfd2-example/\r\n\r\n## Vue version\r\nhttps://github.com/guozhaolong/wfd-vue/\r\n\r\n## Form Designer\r\nhttps://guozhaolong.github.io/apd-example/\r\n\r\n## Usage\r\n```\r\nimport React, { Component } from 'react';\r\nimport Designer from 'wfd';\r\n\r\nconst data = {\r\n    nodes: [{ id: 'startNode', x: 50, y: 200, label: 'Start', clazz: 'start' },\r\n      { id: 'taskNode1', x: 200, y: 200, label: 'Supervisor', assigneType: 'person', assigneValue: 'admin', isSequential:false, clazz: 'userTask' },\r\n      { id: 'taskNode2', x: 400, y: 200, label: 'Manager', assigneType: 'person', assigneValue: 'admin', isSequential:false, clazz: 'userTask' },\r\n      { id: 'decisionNode', x: 400, y: 320, label: 'Cost > 1000', clazz: 'gateway' },\r\n      { id: 'taskNode3', x: 400, y: 450, label: 'CEO', clazz: 'userTask' },\r\n      { id: 'endNode', x: 600, y: 320, label: 'End', clazz: 'end' }],\r\n    edges: [{ source: 'startNode', target: 'taskNode1', sourceAnchor:1, targetAnchor:3, clazz: 'flow' },\r\n      { source: 'taskNode1', target: 'endNode', sourceAnchor:0, targetAnchor:0, clazz: 'flow' },\r\n      { source: 'taskNode1', target: 'taskNode2', sourceAnchor:1, targetAnchor:3, clazz: 'flow' },\r\n      { source: 'taskNode2', target: 'decisionNode', sourceAnchor:1, targetAnchor:0, clazz: 'flow' },\r\n      { source: 'taskNode2', target: 'taskNode1', sourceAnchor:2, targetAnchor:2, clazz: 'flow' },\r\n      { source: 'decisionNode', target: 'taskNode3', sourceAnchor:2, targetAnchor:0, clazz: 'flow' },\r\n      { source: 'decisionNode', target: 'endNode', sourceAnchor:1, targetAnchor:2, clazz: 'flow'},\r\n      { source: 'taskNode3', target: 'endNode', sourceAnchor:1, targetAnchor:1, clazz: 'flow' },\r\n      { source: 'taskNode3', target: 'taskNode1', sourceAnchor:3, targetAnchor:2, clazz: 'flow'},\r\n\r\nclass WFDemo extends Component {\r\n    constructor(props) {\r\n        super(props);\r\n        this.wfDef = React.createRef();\r\n    }\r\n    \r\n    handleSave = () => {\r\n        const bpm = this.wfDef.current.graph.save();\r\n    }\r\n      \r\n    render(){\r\n        const candidateUsers = [{id:'1',name:'Tom'},{id:'2',name:'Steven'},{id:'3',name:'Andy'}];\r\n        const candidateGroups = [{id:'1',name:'Manager'},{id:'2',name:'Security'},{id:'3',name:'OA'}];\r\n        return (\r\n            <>\r\n                <a onClick={this.handleSave}>Save</a>\r\n                <Designer data={data} ref={this.wfDef} height={600} mode={\"edit\"} lang=\"zh\" users={candidateUsers} groups={candidateGroups}/>\r\n            </>\r\n        )\r\n    }\r\n}\r\n```\r\n## API\r\n##### Designer\r\n###### 属性\r\n* data: 初始化数据\r\n* height: 画布高度\r\n* mode: view为只读，edit为可编辑\r\n* lang: zh为中文，en为英文\r\n* isView: 是否为预览模式（隐藏工具栏和属性栏）\r\n* users: 选择审批人时对应的数据，数组内对象以id为键，name为值\r\n* groups: 选择审批组时对应的数据，数组内对象以id为键，name为值\r\n\r\n###### 方法\r\n* save(): 调用graph.save()生成json\r\n* saveXML(): 调用graph.saveXML(createFile)生成Flowable XML，createFile参数是否同时生成xml文件，默认为true\r\n\r\n##### Node\r\n###### 属性\r\n* id: 唯一标识\r\n* x: x点\r\n* y: y点\r\n* label: 节点标题\r\n* hideIcon: 是否隐藏图标  \r\n* active: 是否显示节点状态（节点边将显示运动动画）\r\n* clazz: 类，对应flowable节点，支持类型如下:\r\n    * start 开始节点\r\n    * timerStart 定时启动节点\r\n    * messageStart 消息启动节点\r\n    * signalStart 信号启动节点\r\n    * gateway 排他网关\r\n    * exclusiveGateway 排他网关\r\n    * parallelGateway 并行网关\r\n    * inclusiveGateway 包容网关\r\n    * [userTask](#UserTask) 用户审批节点\r\n    * [scriptTask](#ScriptTask) 脚本节点\r\n    * [mailTask](#MailTask) 邮件节点\r\n    * [javaTask](#JavaTask) 自定义类节点\r\n    * [receiveTask](#ReceiveTask) 接收状态节点\r\n    * timerCatch 定时捕获节点\r\n    * messageCatch 消息捕获节点\r\n    * signalCatch 信号捕获节点\r\n    * end 结束节点\r\n    \r\n##### Edge\r\n###### 属性\r\n* source: 源节点ID\r\n* target: 目标节点ID\r\n* sourceAnchor: 源节点锚点，0上、1右、2下、3左\r\n* targetAnchor: 目标节点锚点\r\n* clazz: 类，目前只有flow一种\r\n\r\n##### UserTask\r\n###### 属性\r\n* assignType 审批类型，包含人员、人员组、自定义类\r\n* assignValue 关联审批人或组\r\n* javaClass 自定义类名\r\n* dueDate 持续时间\r\n* isSequential 是否会签\r\n\r\n##### ScriptTask\r\n###### 属性\r\n* script 脚本内容\r\n\r\n##### JavaTask\r\n###### 属性\r\n* javaClass 自定义类名\r\n\r\n##### ReceiveTask\r\n###### 属性\r\n* waitState 等待状态字段名\r\n* stateValue 等待状态值\r\n\r\n##### MailTask\r\n###### 属性\r\n* to 收件人\r\n* subject 邮件主题\r\n* content 邮件内容\r\n\r\n## Run Example\r\n```\r\nnpm run dev\r\n```\r\n\r\n## React Version\r\n```\r\n>= 16.x\r\n```\r\n","readmeFilename":"README.md"}