其它语言:English
本项目是一个集成流程编辑器的例子。它基于定制的 bpmn-js 和 Vue.js 开发。你需要知道 Vue.js 的知识来阅读和理解源代码。
git clone https://github.com/Pingren/BPMNFlowEditor
cd BPMNFlowEditor
yarn & yarn serve
components
]
PanelLeft
]
index.vue
] Panel 包含 PanePaneDatabase.vue
] list style node pickerPaneOperator.vue
] tree style node pickerPanelRight
]
index.vue
] Panel 包含 PanePaneNodeInfo.vue
] 节点信息预览PaneProperty.vue
] 可扩展的节点属性编辑面板PanelTop
]
index.vue
] Panel 包含编辑、保存等功能的按钮DiagramEditor.vue
] 包含了所有的 vue 组件,负责在其生命周期内创建 diagram 对象和 vuex 状态ZoomSlider.vue
] 缩放滑块module
]
xxx.js...
] 自定义 bpmn.js 模块,自定义的内容注释在文件中index.js
] 自定义 bpmn.js 模块帮助文件,禁用了部分模块store
]
module.js
] vuex 重用模块index.js
] vuex 根状态,控制模块动态注册App.vue
] app 入口,包含了 el-tabs,每个 tab 拥有一个 DiagramEditorDiagram.js
] Diagram 类mock.js
] 模拟后端返回的数据Diagram
是表示数据流图的类。它在 constructor 里创建了 bpmn-js 相关对象并且将它们绑定到实例上。它提供了 importXML
和 exportXML
方法,以及其它图操作方法(比如 createNode
)。
当一个 tab,即 DiagramEditor
组件 mounted 时,它会创建一个 diagram 对象。接着它会将其用 provided/injected API 注入到其所有子组件中。如此一来,所有的 vue 子组件都可以使用 diagram 对象来控制图。
Diagram 也有一些“私有”方法:evaluateNodeData
、evaluateNodeInput
、evaluateNodeOutput
等等。 它们在 bpmn-js EventBus 回调中调用,不应该被外部使用。
一些流程图的状态应该是响应式的,所以需要使用 vuex。每个 diagram 对象都伴随着一个 vuex 状态 store,并使用一个 key 跟踪它。
因为可能有多个 tab 和多个图,本项目 重用了相同的 vuex 模块。当一个 tab,即 DiagramEditor
组件 created 时,vuex 模块将被注册,并在组件销毁前卸载。
vuex 模块包含了流程图的基本状态比如 currentNodeId、isRunning 等等。它也包含了三个节点数据模型对象:inputModel、transferModel、outputModel。
每个节点有着它的属性,保存在 transferModel 中。用户可以在节点属性编辑面板中改变属性。
一个节点还可以有输入和输出数据,保存在 inputModel 和 outputModel 中。输入和输出数据由节点属性,图的拓扑结构以及节点的输入输出的配置共同决定:
节点输入配置:决定了一个节点如何使用其所有父节点的输出(outputModel) 生成该节点的输入。
节点输出配置:决定了一个节点如何使用其属性(transferModel) 生成该节点的输出。
inputModel 和 outputModel 都将自动更新。 核心逻辑在 Diagram.js 之中,使用广度优先遍历。
以下是一些使用类似数据流图编辑器的工程和项目:
代码曾经重构并且有了很大的变化,你可以在分支 archive-codebase
上查看旧版本。请注意它的设计和结构与现在的主分支大相径庭。
暂时没有,欢迎问题和建议!
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。