# 网格 Grid

网格是指渲染/移动节点的最小单位。网格最主要的作用是在移动节点的时候,保证每个节点中心点的位置都是在网格上。这样更有利于节点直接的对其。一般来说,网格的间隔越大,在编辑流程图的时候,节点就更好对其;网格的间隔约小,拖动节点的感觉就更加流出。

网格默认关闭,渲染/移动最小单位为 1px,若开启网格,则网格默认大小为 20px,渲染节点时表示以 20 为最小单位对齐到网络,移动节点时表示每次移动最小距离为 20px。

注意

在设置节点坐标时候会按照网格的大小来对坐标进行转换,如设置中心点位置{ x: 124, y: 138 } 的节点渲染到画布后的实际位置为 { x: 120, y: 140 }。所以使用LogicFlow替换项目中旧的流程设计器时,需要对历史数据的坐标进行处理。

提示

在实际开发中,如果期望节点既可以中心对齐,也可以按照两边对齐。那么自定义节点的宽高需要是grid的偶数倍。也就是假设grid为20,那么所有的节点宽度最好是20、40、80、120这种偶数倍的宽度。

# 开启网格

在创建画布的时候通过配置 grid 来设置网格属性

开启网格并应用默认属性:

const lf = new LogicFlow({
    grid: true
})

// 等同于默认属性如下
const lf = new LogicFlow({
    grid: {
      size: 20,
      visible: true,
      type: 'dot',
      config: {
        color: '#ababab',
        thickness: 1,
      },
    }
})

# 设置网格属性

支持设置网格大小、类型、网格线颜色和宽度等属性。

export type GridOptions = {
  size?: number  // 设置网格大小
  visible?: boolean,  // 设置是否可见,若设置为false则不显示网格线但是仍然保留size栅格的效果
  type?: 'dot' | 'mesh', // 设置网格类型,目前支持 dot 点状和 mesh 线状两种
  config?: {
    color: string,  // 设置网格的颜色
    thickness?: number,  // 设置网格线的宽度
  }
};

# 示例