【bpmn.js 使用总结】九、 Viewer 添加缩放、改色、拖动

最新推荐文章于 2024-06-05 16:56:51 发布

_pengliang

最新推荐文章于 2024-06-05 16:56:51 发布

阅读量1w

点赞数 9

分类专栏： bpmn.js js 文章标签： javascript

本文链接：https://blog.csdn.net/qq_39211165/article/details/113620805

版权

bpmn.js 同时被 2 个专栏收录

11 篇文章 37 订阅

订阅专栏

5 篇文章 0 订阅

订阅专栏

为 Viewer 添加一些功能

也许你只是需要只读，但是希望保留放大缩小以及调整位置。
使用 NavigatedViewer 和 Modeler 显得不是那么灵活，因为需要禁掉多余的功能。

new BpmnModeler({
  additionalModules: [
    {
      // 禁用左侧默认工具栏
      paletteProvider: ['value', '']// 去不干净，还是默认生成空白 dom
      // // 禁用滚轮滚动
      zoomScroll: ['value', ''],
      // // 禁止拖动线
      bendpoints: ['value', ''],
      // // 禁止点击节点出现contextPad
      contextPadProvider: ['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' // 📌注意是使用自己定义过的哦~

const bpmnViewer = new Viewer({
  additionalModules: [
    MoveModule, // 可以调整元素
    ModelingModule, // 基础工具 MoveModule、SetColor 等依赖于此
    MoveCanvasModule, // 移动整个画布
    zoomScroll // 放大缩小
  ]
})