【bpmn.js 使用总结】九、 Viewer 添加缩放、改色、拖动
为 Viewer 添加一些功能
也许你只是需要只读，但是希望保留放大缩小以及调整位置。
使用 NavigatedViewer 和 Modeler 显得不是那么灵活，因为需要禁掉多余的功能。
new BpmnModeler({additionalModules: [{// 禁用左侧默认工具栏paletteProvider: ['value', '']// 去不干净，还是默认生成空白 dom// // 禁用滚轮滚动zoomScroll: ['value', ''],// // 禁止拖动线bendpoints: ['value', ''],// // 禁止点击节点出现contextPadcontextPadProvider: ['value', ''],// // 禁止双击节点出现label编辑框labelEditingProvider: ['value', '']}]
})
这样实际显得很僵硬，我们可以使用最少功能的 Viewer，需要什么功能我们通过 additionalModules 为他增加就好了。
事实上 Modeler 就是这么做的。
可以看到 BaseModeler 这一句
inherits(BaseModeler, BaseViewer)
所以我们就拿 Modeler 的功能选择性的加到 Viewer 就好了。相当于我们自定义了一个全新的 构造器。
准备
我们先来看看 Modeler 有哪些模块
import KeyboardMoveModule from 'diagram-js/lib/navigation/keyboard-move'
import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas'
import TouchModule from 'diagram-js/lib/navigation/touch'
import ZoomScrollModule from 'diagram-js/lib/navigation/zoomscroll'import AlignElementsModule from 'diagram-js/lib/features/align-elements'
import AutoPlaceModule from './features/auto-place'
import AutoResizeModule from './features/auto-resize'
import AutoScrollModule from 'diagram-js/lib/features/auto-scroll'
import BendpointsModule from 'diagram-js/lib/features/bendpoints'
import ConnectModule from 'diagram-js/lib/features/connect'
import ConnectionPreviewModule from 'diagram-js/lib/features/connection-preview'
import ContextPadModule from './features/context-pad'
import CopyPasteModule from './features/copy-paste'
import CreateModule from 'diagram-js/lib/features/create'
import DistributeElementsModule from './features/distribute-elements'
import EditorActionsModule from './features/editor-actions'
import GridSnappingModule from './features/grid-snapping'
import InteractionEventsModule from './features/interaction-events'
import KeyboardModule from './features/keyboard'
import KeyboardMoveSelectionModule from 'diagram-js/lib/features/keyboard-move-selection'
import LabelEditingModule from './features/label-editing'
import ModelingModule from './features/modeling'
import MoveModule from 'diagram-js/lib/features/move'
import PaletteModule from './features/palette'
import ReplacePreviewModule from './features/replace-preview'
import ResizeModule from 'diagram-js/lib/features/resize'
import SnappingModule from './features/snapping'
import SearchModule from './features/search'
比如我们需要使用 Viewer 实现
- 通过
modeling.setColor设置元素和线的颜色（需要引入ModelingModule） - 拖动元素（需要引入
MoveModule） - 拖动画布（需要引入
MoveCanvasModule） - 禁止鼠标滑轮上下滚动影响画布上下移动（需要引入
ZoomScrollModule，并重写scroll方法）
开始
除了需要重写功能的模块，其他的都可以直接引入
import Viewer from 'bpmn-js/lib/Viewer'
import MoveModule from 'diagram-js/lib/features/move'
import ModelingModule from 'bpmn-js/lib/features/modeling'
import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas'const bpmnViewer = new Viewer({additionalModules: [MoveModule, // 可以调整元素ModelingModule, // 基础工具 MoveModule、SetColor 等依赖于此MoveCanvasModule // 移动整个画布]
})
编辑某个模块
新建 zoomScroll.js
import ZoomScrollModule from 'diagram-js/lib/navigation/zoomscroll/ZoomScroll'ZoomScrollModule.prototype.scroll = () => {} // 只要原型链上这个方法为空即可，方法有很多。export default {__init__: ['zoomScroll'],zoomScroll: ['type', ZoomScrollModule]
}
然后重新将模块注入
import Viewer from 'bpmn-js/lib/Viewer'
import MoveModule from 'diagram-js/lib/features/move'
import ModelingModule from 'bpmn-js/lib/features/modeling'
import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas'
import zoomScroll from './zoomScroll.js' //
【bpmn.js 使用总结】九、 Viewer 添加缩放、改色、拖动相关推荐
- vue整合bpmn.js并汉化
文章目录 展示最终效果 壹.准备工作 贰.目录结构和所有文件 1.main.js 文件引入样式文件 2.BpmnModeler.vue 3.defaultXmlStr.js 4.customTrans ...
- vue bpmn.js简单使用
bpmn.js是一个BPMN2.0渲染工具包和web建模器, 使得画流程图的功能在前端来完成. 官方demo https://github.com/bpmn-io/bpmn-js-examples b ...
- js实现移动端图片预览：手势缩放， 手势拖动，双击放大...
原文:js实现移动端图片预览:手势缩放, 手势拖动,双击放大... 前言 本文将介绍如何通过js实现移动端图片预览,包括图片的 预览模式,手势缩放,手势拖动,双击放大等基本功能: 扫码查看示例效果: ...
- Bpmn.js自定义文件说明
Bpmn.js自定义文件说明 由于工作需要(其实不是很需要),在公司项目的基础上开源了一个基于 bpmn-js + Vue 2.x + ElementUI 的一个流程编辑器 Bpmn Process ...
- 自定义bpmn.js左侧工具栏palette样式
自定义bpmn.jspalette样式 前期准备 我在之前的 vue-bpmn 项目的 git 仓库下新创建了一个分支 custom,用来存放自定义样式的相关内容,项目快速预览地址 bpmn.js 的 ...
- bpmn.js+vue实现工作流设计器（左侧功能+右侧详情）
前言: 整理在vue项目中使用bpmn.js的过程和源码. 实现最终效果: 目录: 1.bpmn.js的介绍,官网入口 2.bpmn.js中实现最简单的效果: 引入插件1: 开始开发: (1)页面上: ...
- flowable实战（十五）关于流程设计器 bpmn.js与vue的整合
一.前言: 由于flowable本身带的Moder风格实在与前端页面风格不一样,同时由于Modeler采用Angular.js写的,改造起来相对有一定的难度,所以打算换成bpmn.js当成流程设计器. ...
- Vue+bpmn.js自定义流程图之palette（二）
自定义bpmn.js左侧工具栏palette样式 一.回顾 1.预览 2.目录结构 二.代码 1.paletteProvider.js文件 2.css文件 3.index.js文件 三.总结 一.回顾 ...
- JS实现九乘九乘法表
JS实现九乘九乘法表 第一种:直接输出 第二种:放在表格中 第一种:直接输出 原理: 就是两层嵌套for循环,第一行控制行数和第二个数的限度(最大值),在第二层循环中输出.这里无需调用函数,原因:浏览 ...
- js给数组添加数据的方式/js 向数组对象中添加属性和属性值
参考:https://www.cnblogs.com/ayaa/p/14732349.html js给数组添加数据的方式有以下几种: 直接利用数组下标赋值来增加(数组的下标起始值是0) 例,先存在一个 ...
最新文章
- openStack使用宿主机监控
- App原生、混合、纯WEB开发模式的优劣分析
- php dvld.active 1,PHP的字符串
- CF464E-The Classic Problem【最短路,主席树】
- python字典值求和_Python两个字典键同值相加的方法总结
- c#实现http文件下载
- Leetcode 1043.分隔数组以达到最大和
- 如何使用C#操作WinAPI
- 【Paper】AAAI 2020 故事生成模型 之 角色一致性
- 电脑扬声器耳机已拔出
- [CF235C] Cyclical Quest
- Sequential Recommendation with Self-Attentive Multi-Adversarial Network
- 聚类时的轮廓系数评价和inertia_
- 微信表情的字符编号完整版【图文并茂哦 】
- paypal注册教程(PP注册教程)paypal使用方法
- c语言零基础入门（经验总结）
- 微信公众平台搭建与开发揭秘
- R语言绘制等值线和等高线
- java计算机毕业设计ssm网上报名系统
- 百科：产品生命周期理论
热门文章