LogicFlow 学习笔记——6. LogicFlow 基础网格 Grid

网格 Grid

网格是渲染或移动节点时的基本单元。其主要功能是在节点移动过程中，确保每个节点的中心点都精准落在网格点上，这大大有利于节点之间的精确对齐。通常，网格的间距越大，流程图编辑时的对齐越为便捷；反之，间距越小，节点拖动的操作感会更加流畅。

默认情况下，网格是关闭的，最小的渲染/移动单位是1px。如果启用网格功能，则默认的网格大小为20px，这意味着节点在渲染时会以20px为单位进行对齐，移动节点时每次最少移动20px。

注意
设置节点坐标时，系统会根据网格大小调整坐标值，例如，原始坐标设置为{x: 124, y:138}的节点，实际渲染到画布上的位置会被调整为{x: 120, y: 140}。因此，在用 LogicFlow 替换项目中旧的流程设计器时，需要对旧数据的坐标进行相应的调整。
在具体的开发过程中，如果需要节点既能中心对齐又能边缘对齐，那么自定义节点的宽高应该是网格尺寸的偶数倍，例如，如果网格尺寸为20px，则节点的宽度应优选为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则不显示但保留网格效果
  type?: 'dot' | 'mesh', // 网格类型，可选点状(dot)或线状(mesh)
  config?: {
    color: string,  // 网格颜色
    thickness?: number,  // 网格线宽度
  }
};