LogicFlow自定义边

禁止边移动 (draggable)

边的状态属性：https://beta.logic-flow.cn/api/edge-model-api#%E7%8A%B6%E6%80%81%E5%B1%9E%E6%80%A7

数据属性

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

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

状态属性

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

名称	类型	是否必须	描述
isSelected	boolean	✅	边是否被选中
isHovered	boolean	✅	边是否在 hover 状态
isHitable	boolean	✅	边是否可点击
draggable	boolean	✅	边是否可拖动
isDragging	boolean	✅	边是否正在拖动
isAnimation	boolean	✅	边是否有动画
isShowAdjustPoint	boolean	✅	边是否显示边两端的调整点
visible	boolean	✅	边是否显示, 1.1.0新增

import { CurvedEdge, CurvedEdgeModel } from "@logicflow/extension";

class myCurvedEdge extends CurvedEdge {}
class myCurvedEdgeModel extends CurvedEdgeModel {
  constructor(data, graphModel) {
    super(data, graphModel);
    // 禁用边的拖动
    this.draggable = false;
  }
  initEdgeData(data) {
    super.initEdgeData(data);
    this.radius = 8;
  }
  getEdgeStyle() {
    const style = super.getEdgeStyle();
    style.strokeWidth = 2;
    // style.stroke = "rgb(130, 179, 102)";
    style.stroke = "#ccc";
    return style;
  }
  setAttributes() {
    // this.isAnimation = true;
  }
  getEdgeAnimationStyle() {
    const style = super.getEdgeAnimationStyle();
    style.strokeDasharray = "15 5";
    style.animationDuration = "10s";
    style.stroke = "rgb(130, 179, 102)";
    return style;
  }
}

export default {
  type: "TaskEdge",
  view: myCurvedEdge,
  model: myCurvedEdgeModel
};