# 节点 Node

LogicFlow 的内置节点包括

  • 矩形(rect)
  • 圆形(circle)
  • 椭圆(ellipse)
  • 菱形(diamond)
  • 多边形(polygon)
  • 文本(text)

# 通用属性

# 数据属性

作为data进行保存,可以通过lf.setNodeData进行修改

名称 类型 是否必须 描述
id String 节点 id
type String 节点类型
x number 节点中心x轴坐标
y number 节点中心y轴坐标
text Object/String 节点文本
properties Object 节点自定义属性

# 样式属性

属性取值内部已定义,不作为data进行保存,可通过修改主题、自定义节点方式进行属性值的修改

名称 类型 是否必须 描述
width number 节点宽度
height number 节点高度
fill color 节点填充颜色
fillOpacity number 节点填充颜色透明度
stroke color 节点边框颜色
strokeOpacity number 节点边框颜色透明度
strokeWidth number 节点边框宽度
opacity number 节点整体透明度
outlineColor color 外框颜色
hoverOutlineColor color hover外边框颜色
outlineStrokeDashArray string 控制用来描外边框的点划线的图案范式, 设置为空是为实线
hoverOutlineStrokeDashArray string 控制用来描hover外边框的点划线的图案范式, 设置为空是为实线

# 附加属性

不对外输出

名称 类型 是否必须 描述
modelType String 节点图形类型,已内部定义
graphModel object 图形数据
menu Object 节点菜单
anchorsOffset Array 锚点相对于节点中心坐标的偏移值数组
targetRules Array 节点可以连接的规则
sourceRules Array 节点可以被连接的规则
additionStateData object 设置节点状态的附加数据,例如显示菜单,菜单的位置信息

# 状态属性

编辑过程中使用,不对外输出

名称 类型 是否必须 描述
isSelected boolean 节点是否被选中
isHovered boolean 节点是否在hover状态
zIndex number 节点在图中显示优先级,数值大的在上面,类似于css中zIndex的定义
anchors Array 锚点数组
state number 节点状态

节点状态

  • 1:默认
  • 2:文本编辑
  • 3:展示菜单
  • 4:允许连接
  • 5:不允连接

# 通用方法

# lf.addNode

创建节点

# 参数

名称 类型 描述
nodeConfig NodeConfig 节点数据
type NodeConfig = {
  id?: string;
  type: string;
  x: number;
  y: number;
  text?: TextConfig;
  properties?: Record<string, unknown>;
};

# 返回值

# 用法

lf.addNode(nodeConfig: NodeConfig);

# lf.getNodeData

获取节点数据

# 参数

名称 类型 描述
nodeId string 节点Id

# 返回值

名称 类型 描述
nodeData NodeData 节点数据
// 节点数据
type NodeData = {
  id: string;
  type: string;
  x: number;
  y: number;
  text: TextConfig;
  properties: Record<string, unknown>;
};

# 用法

lf.getNodeData(nodeId);

# lf.setNodeData

设置节点数据(即将废弃,如果想要修改properties,请使用setProperties。如果想要修改id请使用setNodeId)

# 参数

名称 类型 描述
nodeAttribute NodeAttribute 节点数据
// 修改节点数据的参数
export type NodeAttribute = {
  id: string;
  type?: string;
  x?: number;
  y: number;
  text?: TextConfig;
  properties?: Record<string, unknown>;
};

# 返回值

# 用法

lf.setNodeData(nodeData);

# lf.deleteNode

删除节点

# 参数

名称 类型 描述
nodeId string 节点Id

# 返回值

# 用法

lf.deleteNode(nodeId);

# lf.cloneNode

复制节点

# 参数

名称 类型 描述
nodeId string 节点Id

# 返回值

名称 类型 描述
nodeData NodeData 节点数据
// 节点数据
type NodeData = {
  id: string;
  type: string;
  x: number;
  y: number;
  text: TextConfig;
  properties: Record<string, unknown>;
};

# 用法

lf.cloneNode(nodeId);

# lf.focusOn

将节点定位到画布中心

# 参数

名称 类型 必传 默认值 描述
id String - 图形的id
coordinate Object - 图形当前的位置坐标

# 返回值

# 用法

lf.focusOn({
  id: '22'
})

lf.focusOn({
  coordinate: {
    x: 11,
    y: 22
  }
})

# 节点属性

不同类型节点自定义的属性,自定义属性都是样式属性,下面不再区分属性类型。属性取值内部已定义,不作为data进行保存,可通过修改主题、自定义节点方式进行属性值的修改。

# 矩形

名称 类型 是否必须 描述
radius number 矩形圆角

# 圆形

名称 类型 是否必须 描述
r number 圆形半径

# 椭圆

名称 类型 是否必须 描述
rx number 椭圆x轴半径
ry number 椭圆y轴半径

# 菱形

名称 类型 是否必须 描述
rx number 菱形x轴宽度的1/2
ry number 菱形y轴高度的1/2

# 多边形

名称 类型 是否必须 描述
points Point[] 多边形端点坐标
type Point = [number, number]

# 文本

名称 类型 是否必须 描述
fontSize number 字体大小
fontFamily string 字体类型
fontWeight number / string 字体粗细