![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
bpmn.js
文章平均质量分 75
_pengliang
这个作者很懒,什么都没留下…
展开
-
【bpmn.js 使用总结】十、答疑
答疑 (持续更新)1 如何自定义 id如何将 id,例如 Task_1hcentk 改成自己想要的格式 ?先看看源码怎么写bpmn-js/lib/features/modeling/BpmnFactory.jsBpmnFactory.prototype._ensureId = function(element) { // generate semantic ids for elements // bpmn:SequenceFlow -> SequenceFlow_ID var p原创 2021-06-20 11:58:01 · 3586 阅读 · 20 评论 -
【bpmn.js 使用总结】九、 Viewer 添加缩放、改色、拖动
为 Viewer 添加一些功能也许你只是需要只读,但是希望保留放大缩小以及调整位置。使用 NavigatedViewer 和 Modeler 显得不是那么灵活,因为需要禁掉多余的功能。new BpmnModeler({ additionalModules: [ { // 禁用左侧默认工具栏 paletteProvider: ['value', '']// 去不干净,还是默认生成空白 dom // // 禁用滚轮滚动 zoomScroll: [原创 2021-02-03 22:18:14 · 10154 阅读 · 8 评论 -
【bpmn.js 使用总结】八、自定义规则
自定义 Rules为 Bpmn 加上新的规则约束。开始1. 创建相关文件老规矩,准备好文件。这里直接从 bpmn-js-examples 中的custom-modeling-rules建立自定义规则的相关文件,结构如下| -- rules |-- CustomRules.js |-- index.js2. 修改index.jsimport CustomRules from './CustomRules'export default { __init__: ['cu原创 2020-11-20 22:51:17 · 4099 阅读 · 1 评论 -
【bpmn.js 使用总结】七、指定 Palette 容器
指定 Palette 容器开始之前需要了解一下自定义 Palette开始去除默认工具栏 // 去除默认工具栏 const modules = BpmnModeler.prototype._modules const index = modules.findIndex(it => it.paletteProvider) modules.splice(index, 1) this.bpmnModeler = new BpmnModeler({.原创 2020-11-07 20:27:25 · 1808 阅读 · 1 评论 -
【2020-11-07】使用 vue 模仿 camunda 的 BPMN 部分
使用 vue 模仿 camunda 的 BPMN 部分点击预览网页截图其中实现了 多种对齐方式、设置颜色、上传下载图片、文件、小地图、属性面板等 等功能代码地址点击这里原创 2020-11-07 20:25:08 · 1433 阅读 · 0 评论 -
【bpmn.js 使用总结】六、自定义线条颜色
设置颜色官方提供了 4 中方法官方 demo我这里推荐两种一、官方 APIconst modeling = this.modeler.get('modeling')modeling.setColor(element, { fill: 'blue', stroke: 'red'})二、通过 css 自定义连线和箭头的颜色NavigatedViewer、Viewer、Modeler三种模式都适用配合自定义渲染加上不同的类名,能够达到每条线有不一样的颜色或者遍历链路获取节点的颜色,原创 2020-11-07 20:15:59 · 6203 阅读 · 5 评论 -
【bpmn.js 使用总结】五、自定义内容面板 contextPad
自定义 contextPad在 自定义 contextPad 的基础上继续修改案例代码在这里取:customContextPad开始自定义 contextPad 和 自定义 Palette 步骤差不多1. 创建相关文件建立自定义内容面板的相关文件,结构如下| -- contextPad |-- CustomContextPad.js |-- index.js这里比较方便直接去官方的 Demo 中取代码bpmn-js-example-custom-elements接下来原创 2020-10-19 21:44:18 · 7005 阅读 · 0 评论 -
【bpmn.js 使用总结】四、自定义渲染 Renderer
自定义 Renderer在 [自定义 Palette] 的基础上继续修改案例代码在这里取:customRenderer开始由于画布中的图形为 SVG,不像 Palette 是使用 HTML,所以需要学习 SVG 的基础知识并且需要用到 BPMN 提供的一个 SVG 库 tiny-svg1. 创建相关文件建立自定义渲染的相关文件,结构如下| -- renderer |-- CustomRenderer.js |-- index.js这里比较方便直接去官方的 Demo 中取原创 2020-10-19 21:43:53 · 4238 阅读 · 0 评论 -
【bpmn.js 使用总结】三、自定义工具栏 Palette
自定义 Palette[了解 BPMN 内部】后,对一些模块以及它们之间的配合应该有了一定的概念,下面开始动手尝试修改一下 palette 工具栏案例代码在这里取:customPalette开始你可以实现通过配置生成工具栏自定义工具栏样式、布局可指定工具栏容器为了理解更简单自定义工具栏样式、布局 (非必须,后续实现)可指定工具栏容器(非必须,后续实现)注意:标记 ???? 的地方为重点1. 创建相关文件建立自定义工具栏的相关文件,结构如下| -- palette原创 2020-10-19 21:43:17 · 10581 阅读 · 4 评论 -
【bpmn.js 使用总结】二、了解 bpmn-js 内部
介绍bpmn-js 是 BPMN 2.0 呈现工具包和 Web 建模器。它是用 JavaScript 编写的,将 BPMN 2.0 图表嵌入到现代浏览器中,并且不需要服务器后端。这样可以轻松将其嵌入到任何 Web 应用程序中。该库以既可以查看器又可以是 Web 建模器的方式构建。使用 viewer 将 BPMN 2.0 嵌入到您的应用程序中,并用您的数据丰富它。使用 modeler 在应用程序内部创建 BPMN 2.0 图表。了解内部之前先了解下外观:下面介绍库内部的一些见解,即有助于其高度模块化原创 2020-10-19 21:42:41 · 16722 阅读 · 0 评论 -
【bpmn.js 使用总结】一、基础使用
基础使用Viewer BPMN 图表查看器NavigatedViewer 包含鼠标导航工具的图表查看器Modeler BPMN 图表建模器Viewer 功能最简单,仅用来展示NavigatedViewer 在 Viewer 上扩展了导航和缩放功能Modeler 融合了 Viewer 和 NavigatedViewer,并拥有工具栏、属性面板等,实现建模能力快速上手(Vue)安装依赖npm install bpmn-js -Shtml<div ref="canvas" cl原创 2020-10-19 21:41:46 · 5173 阅读 · 1 评论