{"_id":"@codeflex/antd-bpmn","name":"@codeflex/antd-bpmn","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@codeflex/antd-bpmn","author":{"name":"yangfuhai"},"version":"1.0.0","type":"module","keywords":["antd-bpmn","antdesign bpmn","react","antd","ant.design"],"main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"require":"./dist/index.cjs","import":"./dist/index.js","types":"./dist/index.d.ts"}},"scripts":{"dev":"vite","build":"tsc && vite build","lint":"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0","preview":"vite preview","test":"vitest run","watch":"vitest"},"dependencies":{"@ant-design/icons":"^5.2.6","antd":"^5.10.0","bpmn-js":"^14.0.0","diagram-js-minimap":"^4.1.0","react":"^18.2.0","react-dom":"^18.2.0"},"devDependencies":{"@types/node":"^20.8.3","@types/react":"^18.2.15","@types/react-dom":"^18.2.7","@typescript-eslint/eslint-plugin":"^6.0.0","@typescript-eslint/parser":"^6.0.0","@vitejs/plugin-react":"^4.0.3","eslint":"^8.45.0","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.4.3","sass":"^1.69.3","typescript":"^5.0.2","vite":"^4.4.5","vite-plugin-dts":"^3.6.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"repository":{"type":"git","url":"git+https://github.com/AntdAdmin/antd-bpmn.git"},"bugs":{"url":"https://github.com/AntdAdmin/antd-bpmn/issues"},"homepage":"https://github.com/AntdAdmin/antd-bpmn#readme","license":"MIT","gitHead":"f7cc81acfbb665180216ec7e7bbbb48191ce73d9","description":"一个基于 React + Ant.design + bpmn.js 编写的工作流高阶组件。","_id":"@codeflex/antd-bpmn@1.0.0","_nodeVersion":"16.14.2","_npmVersion":"9.6.0","dist":{"integrity":"sha512-KNOD0uI7AC9NlWmnsOx4e1iBU5q1xnGuHI+3ALV5YnU4gyTKrWN6MnMuEBl72FbSxoXbGbnxRF4CyIF9RoxOCw==","shasum":"7cc6075bcee1e4357ce38755095a98c46eeec316","tarball":"https://registry.npmjs.org/@codeflex/antd-bpmn/-/antd-bpmn-1.0.0.tgz","fileCount":8,"unpackedSize":2521304,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCw4xZU4Z0vBJT7RcwLAJ2QjpXy2Ywuzq0Y8ErH6SCjqwIgB9F4m71qCanTZ7/g1I2ZXqWRdL1lJonFZmOOJkvoP0s="}]},"_npmUser":{"name":"yangfuhai","email":"fuhai999@gmail.com"},"directories":{},"maintainers":[{"name":"yangfuhai","email":"fuhai999@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/antd-bpmn_1.0.0_1697712941469_0.9607750675683688"},"_hasShrinkwrap":false}},"time":{"created":"2023-10-19T10:55:41.380Z","1.0.0":"2023-10-19T10:55:41.719Z","modified":"2023-10-19T10:55:42.017Z"},"maintainers":[{"name":"yangfuhai","email":"fuhai999@gmail.com"}],"description":"一个基于 React + Ant.design + bpmn.js 编写的工作流高阶组件。","homepage":"https://github.com/AntdAdmin/antd-bpmn#readme","keywords":["antd-bpmn","antdesign bpmn","react","antd","ant.design"],"repository":{"type":"git","url":"git+https://github.com/AntdAdmin/antd-bpmn.git"},"author":{"name":"yangfuhai"},"bugs":{"url":"https://github.com/AntdAdmin/antd-bpmn/issues"},"license":"MIT","readme":"# Antd-bpmn\n\n一个基于 React + Ant.design + bpmn.js 编写的工作流高阶组件。\n\n![](./docs/assets/images/01.png)\n\n\n### 已完成功能\n- [x] 基于 bpmn.js 的基础画图功能\n- [x] XML 预览\n- [x] XML 保存\n- [x] 对齐方式：向右对齐，左右居中，向左对齐，向上对齐，上下居中，向下对齐\n- [x] 放大、缩小\n- [x] 撤销、重做\n- [x] 小地图、快捷键\n- [x] 重写工具栏（更符合国人习惯）\n- [x] 重写元素菜单（更符合国人习惯）\n- [x] 属性面板的设置\n\n### 如何使用\n\n安装：\n\n```shell\nnpm i @codeflex/antd-bpmn\n```\n\n示例代码：\n\n```tsx\nfunction App() {\n    const config: AntdBpmnConfig = {\n        deptDataUrl: \"/xxxx\",\n        deptDataUrl: \"bpmn.demo.xml\",\n        onLoad: (url, set) => {\n            console.log(\"onLoad\", url)\n            // 加载 xml 数据\n            if (url === \"bpmn.demo.xml\") {\n                fetch(url).then(response => set(response.text()))\n                    .catch(err => console.log(err));\n            }\n            // 加载部门数据\n            else {\n                set([\n                    {value: 'dept1', label: '北京分公司'},\n                    {value: 'dept2', label: '上海分公司'},\n                    {value: 'dept3', label: '-- 上海研发部'},\n                ])\n            }\n        },\n\n        onChooseAssignee: (set) => {\n            set(Math.random(), \"Michael\");\n        },\n    };\n    return <AntdBpmn config={config}/>;\n}\n```\n\n**AntdBpmnConfig** 说明：\n\n- xmlDataUrl: 获取 bpmn xml 数据的 URL\n- deptDataUrl: 获取部门数据的 URL\n- onLoad: 监听加载网络数据，数据加载完毕后通过第二个参数 `set` 方法来设置\n- onChooseAssignee: 监听选择用户操作，选择用户后通过第二个参数 `set` 方法来设置\n\n\n\n\n### 运行测试\n\n```shell\ngit clone https://gitee.com/antdadmin/antd-bpmn.git\n\nnpm install\nnpm run dev\n```\n\n> Antd-bpmn 需要等第一个版本 release 后，才会发布到 NPM 仓库。\n\n### AntdAdmin 介绍\n\nAntdAdmin 是一个致力于 **中国信创** 产业的前端开源框架，其底层技术栈主要以 React + Ant.design 为主。AntdAdmin 开源（或者计划开源）的产品主要如下：\n\n\n- antd-admin：一个基于 React + Ant.Design 的中（后）台 UI 框架（准备中...）。\n- antd-crud：一个基于 React + Ant.Design 的增删改查高级组件（已开源：https://gitee.com/antdadmin/antd-crud ）。\n- antd-bpmn：一个基于 React + Ant.Design 的工作流设计组件（已开源：https://gitee.com/antdadmin/antd-bpmn ）。\n- antd-builder：一个基于 React + Ant.Design 的表单拖拽设计组件（准备中...）。\n\n\n**AntdAdmin 交流 QQ 群：** 560291578\n","readmeFilename":"README.md"}