网格 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, // 网格线宽度
}
};