diagram-js-grid-bg

A visual grid background for diagram-js, base on diagram-js-grid.

一个提供给 diagram-js 使用的虚拟网格背景，基于 diagram-js-grid 项目。

How to use 如何使用

1. Clone this repository.

2. Copy the GridLine directory to your own project.

3. import it.

4. 克隆这个项目.

5. 将 GridLine 这个目录复制到你自己的项目中.

6. 使用 import 导入这个模块.

This project has been published as an NPM dependency package.

该项目已经发布为一个NPM依赖包

1. Add the diagram-js-grid-bg to your project:

1npm install diagram-js-grid-bg

2. Add it to the additionalModules Array

1import Modeler from 'bpmn-js/lib/Modeler'
2import GridLineModule from 'diagram-js-grid-bg'
3
4
5const modeler = new Modeler({
6  container: '#container',
7  additionalModules: [
8    // ...
9    GridLineModule
10  ]
11})

Configurations 配置项

This plugin module supports five custom configurations.

name	desc	type	default	required
smallGridSpacing	最小网格边长	number	10	false
gridSpacing	大号网格边长	number	smallGridSpacing * 10	false
gridLineStroke	网格边框宽度	number	0.5	false
gridLineOpacity	网格边框透明度	number	0.4	false
gridLineColor	网格边框颜色	string	#ccc	false

Preview 效果预览

1. default 默认效果

2. custom config 自定义配置

1import Modeler from 'bpmn-js/lib/Modeler'
2import GridLineModule from '@/xxx/GridLine'
3
4
5const modeler = new Modeler({
6  container: '#container',
7  additionalModules: [
8    // ...
9    GridLineModule
10  ],
11  gridLine: {
12    smallGridSpacing: 20,
13    gridSpacing: 80,
14    gridLineStroke: 1,
15    gridLineOpacity: 0.2,
16    gridLineColor: '#20e512'
17  }
18})