# edgeModel

LogicFlow中所有的边都会有一个edgeModel与其对应。由于数据驱动视图的机制,我们对边的所有操作事实上就是对model的操作。大多数情况下,我们不建议直接对edgeModel的属性进行赋值操作,而是调用model或者graphModel上提供的方法。

# 数据属性

边的数据属性是指在LogicFlow流程图保存时,保存边的数据。

名称 类型 是否必须 描述
id String 边 id
type String 边类型
sourceNodeId string 开始节点Id
targetNodeId string 结束节点Id
startPoint Point 边的开始坐标
endPoint Point 边的坐标
text Object/String 边文本
pointsList Array 控制边的轨迹,polylinebezier有,line没有
properties Object 边的自定义属性

# 状态属性

一般用于自定义边的时候,基于状态属性进行更细粒度的样式显示。

名称 类型 是否必须 描述
isSelected boolean 边是否被选中
isHovered boolean 边是否在hover状态
isHitable boolean 边是否可点击
draggable boolean 边是否可拖动
visible boolean 边是否显示, 1.1.0新增

# 形状属性

一般用于自定义边的时候,形状属性可以通过setAttributes来设置。

名称 类型 是否必须 描述
offset number polyline表示折线转折点基于节点的距离。 bezier表示控制曲线调整手柄的长度。

# 其它属性

LogicFlow在model上还维护一些属性,开发者可以通过这些属性拿到一些信息。例如拿到graphModel, 节点的基础model类型等。

名称 类型 是否必须 描述
graphModel object 整个画布对应的model,详情见
zIndex number 节点在z轴的高度,元素重合时,zIndex高的在上面。默认为0
state number 元素状态,不同的状态对应着元素显示效果。DEFAULT = 1 默认显示;TEXT_EDIT = 2 此元素正在进行文本编辑;ALLOW_CONNECT = 4, 此元素允许作为当前边的目标节点;NOT_ALLOW_CONNECT = 5, 此元素不允许作为当前边的目标节点
BaseType string 当前model的基础类型,对于边,则固定为edge。主要用在节点和边混合的时候识别此model是节点还是边。
modelType string 当前model的类型,可取值有edge,polyline,bezier,line
sourceAnchorId string - 连线起点锚点id
targetAnchorId string - 连线终点锚点id
customTextPosition boolean - 自定义连线文本位置
virtual boolean - 是否为虚拟节点,默认false。当为true时导出数据不会包含此元素。 v1.1.24

# 样式属性

LogicFlow所有的边最终都是以SVG DOM的方式渲染。svg的样式相关属性都不会直接存在edgeModel。当开发者想要对SVG DOM添加更多的svg属性 (opens new window)时,可以通过重写edgeModel上获取边样式属性方法来实现。

# getEdgeStyle

支持重写,自定义边文本样式属性. 默认为主题 baseEdge

class SequenceFlowModel extends PolylineModel {
  getEdgeStyle() {
    const style = super.getEdgeStyle();
    style.stroke = 'blue';
    style.strokeDasharray = '3 3';
    return style;
  }
}

# getAnimation

支持重写,自定义边的流向动画

class CustomBezierModel extends BezierEdgeModel {
  getAnimation() {
    const animation = super.getAnimation();
    animation.stroke = 'blue';
    return animation;
  }
}

# getTextStyle

支持重写,自定义边文本样式属性,默认为主题 edgeText

class SequenceFlowModel extends PolylineModel {
  getTextStyle() {
    const style = super.getTextStyle();
    style.color = 'blue';
    style.fontSize = '20';
    return style;
  }
}

# initEdgeData

支持重写,初始化边数据。

class UserEdgeModel extends PolylineEdgeModel {
  initEdgeData(data) {
    super.initEdgeData(data);
    this.offset = 20;
  }
}

提示

initEdgeData和setAttributes都可以对edgeModel的属性进行赋值,但是两者的区别在于:

  • initEdgeData只在初始化的时候调用,用于初始化的属性。
  • setAttributes除了初始化调用外,还会在properties发生变化了调用。

# setAttributes

设置model形状属性,每次properties发生变化会触发

class UserEdgeModel extends PolylineEdgeModel {
  setAttributes(data) {
    super(data);
    this.offset = 20;
  }
}

# createId

支持重写,自定义节点id的生成规则.

注意

  1. 请保证此方法返回id的唯一性。
  2. 此方法为同步方法,如果想要异步修改节点id, 请参考#272 (opens new window)
import { v4 as uuidv4 } from 'uuid';

class UserTaskModel extends RectNodeModel {
  createId() {
    return uuidv4()
  }
}

# getData

获取被保存时返回的数据。LogicFlow有固定边数据格式。如果期望在保存数据上添加数据,请添加到properties上。

不支持重写此方法

const edgeModel = lf.getEdgeModelById('edge_1');
const edgeData = edgeModel.getData();

# getProperties

获取边属性

不支持重写此方法

const edgeModel = lf.getEdgeModelById('edge_1');
const properties = edgeModel.getProperties();

# setProperties

设置边properties

const edgeModel = lf.getEdgeModelById('edge_1');
edgeModel.setProperties({
  // 自定义properties
})

# deleteProperty

删除边的某个属性

lf.on("edge:click", ({ data }) => {
  lf.getEdgeModelById(data.id).deleteProperty('disabled');
  lf.getEdgeModelById(data.id).deleteProperty('scale');
});

# updateText

修改边文本内容

参数

名称 类型 必传 默认值 描述
value string true 文本值
const edgeModel = lf.getEdgeModelById('edge_1');
edgeModel.updateText('hello world');

# getTextPosition

支持重写,自定义连线上文本位置。