/diagram-js-grid-bg

A visual grid backgroud for diagram-js, base on diagram-js-grid. 基于 diagram-js-grid 的 SVG 网格背景,可用于diagram-js的相关项目,例如 bpmn-js、dmn-js 等。

Primary LanguageTypeScriptMIT LicenseMIT

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
  1. 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 默认效果

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'
  }
})

custom