antd-bpmn
A workflow high-order component written based on React + Ant.design + bpmn.js.
Completed function
- Basic drawing function based on bpmn.js
- XML preview
- XML save
- Alignment: Align right, center left, align left, align up, center up and down, align down
- Zoom in, zoom out
- Undo, redo
- Minimap, shortcut keys
- Rewrite the toolbar (more in line with Chinese habits)
- Rewrite the element menu (more in line with Chinese habits)
- Properties panel settings
how to use
Install:
npm i @codeflex/antd-bpmn
Sample code:
function App () { const config : AntdBpmnConfig = { deptDataUrl : " /xxxx " , deptDataUrl : " bpmn.demo.xml " , onLoad : ( url , set ) => { console . log ( " onLoad " , url ) // Load xml data if ( url === " bpmn.demo.xml " ) { fetch ( url ). then ( response => set ( response . text ())) . catch ( err => console . log ( err )) ; } // Load department data else { set ([ { value : ' dept1 ' , label : ' Beijing Branch ' }, { value : ' dept2 ' , label : ' Shanghai Branch ' }, { value : ' dept3 ' , label : ' -- Shanghai R&D Department ' }, ]) } }, onChooseAssignee : ( set ) => { set ( Math . random (), " Michael " ); }, }; return < AntdBpmn config = { config } />; }
AntdBpmnConfig description:
- xmlDataUrl: Get the URL of bpmn xml data
- deptDataUrl: URL to obtain department data
- onLoad: monitors the loading of network data, and sets it through the second parameter method after the data is loaded.
set - onChooseAssignee: Monitor the user selection operation and set it through the second parameter method after selecting the user.
set
Run tests
git clone https://gitee.com/antdadmin/antd-bpmn.git npm install npm run dev
Introduction to AntdAdmin
AntdAdmin is a front-end open source framework dedicated to China's information and innovation industry. Its underlying technology stack is mainly based on React + Ant.design. The main open source (or planned open source) products of AntdAdmin are as follows:
- antd-admin: A middle (back) UI framework based on React + Ant.Design (in preparation...).
- antd-crud: An advanced component for adding, deleting, modifying and checking based on React + Ant.Design (open source: https://gitee.com/antdadmin/antd-crud ).
- antd-bpmn: A workflow design component based on React + Ant.Design (open source: https://gitee.com/antdadmin/antd-bpmn ).
- antd-builder: A form drag-and-drop design component based on React + Ant.Design (in preparation...).