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:

npm install diagram-js-grid-bg

2. Add it to the additionalModules Array

import Modeler from 'bpmn-js/lib/Modeler'
import GridLineModule from 'diagram-js-grid-bg'


const modeler = new Modeler({
  container: '#container',
  additionalModules: [
    // ...
    GridLineModule
  ]
})

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 自定义配置

import Modeler from 'bpmn-js/lib/Modeler'
import GridLineModule from '@/xxx/GridLine'


const modeler = new Modeler({
  container: '#container',
  additionalModules: [
    // ...
    GridLineModule
  ],
  gridLine: {
    smallGridSpacing: 20,
    gridSpacing: 80,
    gridLineStroke: 1,
    gridLineOpacity: 0.2,
    gridLineColor: '#20e512'
  }
})