LogicFlow 学习笔记——3. LogicFlow 基础 节点 Node

节点 Node

LogicFlow 内置了一些基础节点，开发者在实际应用场景中，可以基于这些基础节点，定义符合自己业务逻辑的节点。

认识基础节点

LogicFlow是基于svg做的流程图编辑框架，所以我们的节点和连线都是svg基本形状，对LogicFlow节点样式的修改，也就是对svg基本形状的修改。LogicFlow内部存在7中基础节点，分别为：

1. 矩形 —— rect
2. 圆形 —— circle
3. 椭圆 —— ellipse
4. 多边形 —— polygon
5. 菱形 —— diamond
6. 文本 —— text
7. HTML —— html

如下所示：

LogicFlow 的基础节点是比较简单的，但是在业务中对节点外观要求可能有各种情况。LogicFlow提供了非常强大的自定义节点功能，可以支持开发者自定义各种节点。下面是基于继承的自定义节点介绍。

自定义节点

LogicFlow是基于继承来实现自定义节点、边。开发者可以继承LogicFlow内置的节点，然后利用面向对象的重写机制。重写节点样式相关的方法，来达到自定义节点样式的效果。

注意:
LogicFlow推荐在实际应用场景中，所有的节点都使用自定义节点，将节点的type定义为符合项目业务意义的名称。而不是使用圆形、矩形这种仅表示外观的节点。

节点 model 和 view

在自定义一个节点的时候，我们需要定义节点的model和view。这是因为LogicFlow基于MVVM模式，需要通过重写定义model上获取样式相关的方法和重写view上的getShape来定义更复杂的节点外观。

在项目目录 src/views/Example/LogicFlow/component 下分别创建以下代码：

1. src/views/Example/LogicFlow/component/CustomCircle/index.ts

   // 从 @logicflow/core 引入相关的类
   import {
        
        
     CircleNode, // 基础圆形节点视图
     CircleNodeModel, // 基础圆形节点模型
     GraphModel, // 图形模型，用于管理和操作图形
     NodeConfig // 节点配置类型定义
   } from '@logicflow/core'
   
   // 定义一个自定义的圆形节点模型类，继承自 CircleNodeModel
   class CustomCircleModel extends CircleNodeModel {
        
        
     // 构造函数
     constructor(data: NodeConfig, graphModel: GraphModel) {
        
        
       // 调整节点的文本配置，确保文本与节点位置保持一致
       data.text = {
        
        
         value: data.text as string, // 强制将文本内容视为字符串
         x: data.x, // 设置文本的 x 坐标为节点的 x 坐标
         y: data.y // 设置文本的 y 坐标为节点的 y 坐标
       }
       // 调用父类的构造函数，完成节点模型的初始化
       super(data, graphModel)
     }
   }
   
   // 导出自定义节点的配置，用于在 LogicFlow 中注册和使用这种节点
   export default {
        
        
     type: 'CustomCircle', // 自定义节点类型的唯一标识
     view: CircleNode, // 视图使用基础的圆形节点视图
     model: CustomCircleModel // 模型使用上面定义的自定义圆形节点模型
   }
   

2. src/views/Example/LogicFlow/component/CustomDiamond/index.ts

   // 从 @logicflow/core 引入必要的类
   import {
        
        
     DiamondNode, // 基础菱形节点的视图
     DiamondNodeModel, // 基础菱形节点的模型
     GraphModel, // 图形模型，用于图的管理和操作
     NodeConfig // 节点配置类型定义
   } from '@logicflow/core'
   
   // 创建一个自定义的菱形节点模型类，继承自 DiamondNodeModel
   class CustomDiamondModel extends DiamondNodeModel {
        
        
     // 构造函数
     constructor(data: NodeConfig, graphModel: GraphModel) {
        
        
       // 在调用父类构造函数前，初始化文本属性
       data.text = {
        
        
         value: data.text as string, // 强制类型转换，确保文本值为字符串
         x: data.x, // 设置文本的 x 坐标与节点 x 坐标一致
         y: data.y + 40 // 设置文本的 y 坐标，使其在节点下方40像素处
       }
       // 调用父类的构造函数进行初始化
       super(data, graphModel)
   
       // 设置自定义的半径属性，控制菱形的宽高
       this.rx = 50 // 水平方向的半径（即半宽）
       this.ry = 20 // 垂直方向的半径（即半高）
     }
   }
   
   // 导出自定义节点的配置，使其可以在 LogicFlow 中使用
   export default {
        
        
     type: 'CustomDiamond', // 自定义节点类型的唯一标识
     view: DiamondNode, // 视图使用基础的菱形节点视图
     model: CustomDiamondModel // 模型使用上面定义的自定义菱形节点模型
   }
   

3. src/views/Example/LogicFlow/component/CustomEllipse/index.ts

   // 从 @logicflow/core 库中导入所需的类
   import {
        
        
     EllipseNode,         // 基础椭圆形节点的视图类
     EllipseNodeModel,    // 基础椭圆形节点的模型类
     GraphModel,          // 用于管理图的整体模型
     NodeConfig           // 节点配置接口
   } from '@logicflow/core'
   
   // 定义一个自定义的椭圆形节点模型类，继承自 EllipseNodeModel
   class CustomEllipseModel extends EllipseNodeModel {
        
        
     // 构造函数
     constructor(data: NodeConfig, graphModel: GraphModel) {
        
        
       // 检查文本数据是否存在且为字符串，如果是，则设置文本属性
       if (data.text && typeof data.text === 'string') {
        
        
         data.text = {
        
        
           value: data.text,   // 设置文本值
           x: data.x,          // 设置文本的 x 坐标为节点的 x 坐标
           y: data.y + 40      // 设置文本的 y 坐标为节点的 y 坐标向下偏移40像素
         }
       }
       // 调用父类构造函数进行初始化
       super(data, graphModel)
   
       // 设置自定义的椭圆大小属性
       this.rx = 50  // 椭圆的水平半径
       this.ry = 20  // 椭圆的垂直半径
     }
   }
   
   // 导出自定义节点的配置
   export default {
        
        
     type: 'CustomEllipse',   // 自定义节点的类型标识
     view: EllipseNode,       // 使用基础椭圆形节点的视图
     model: CustomEllipseModel // 使用定义的自定义椭圆形节点模型
   }
   

4. src/views/Example/LogicFlow/component/CustomPolygon/index.ts

   // 从 @logicflow/core 库导入所需的类和类型
   import {
        
         PointTuple, PolygonNode, PolygonNodeModel } from '@logicflow/core'
   
   // 定义一个自定义多边形节点模型类，继承自 PolygonNodeModel
   class CustomPolygonModel extends PolygonNodeModel {
        
        
     // 设置多边形节点的属性
     setAttributes() {
        
        
       const width = 100  // 多边形的宽度
       const height = 100 // 多边形的高度
       const x = 50       // 多边形中心的 x 坐标
       const y = 50       // 多边形中心的 y 坐标
   
       // 计算多边形的顶点列表，形成一个八边形
       const pointList: PointTuple[] = [
         [x - 0.205 * width, y - 0.5 * height],   // 左上顶点
         [x + 0.205 * width, y - 0.5 * height],   // 右上顶点
         [x + 0.5 * width, y - 0.205 * height],   // 右上角拐点
         [x + 0.5 * width, y + 0.205 * height],   // 右下角拐点
         [x + 0.205 * width, y + 0.5 * height],   // 右下顶点
         [x - 0.205 * width, y + 0.5 * height],   // 左下顶点
         [x - 0.5 * width, y + 0.205 * height],   // 左下角拐点
         [x - 0.5 * width, y - 0.205 * height]    // 左上角拐点
       ]
       // 将计算出的顶点赋值给 points 属性
       this.points = pointList
     }
   
     // 重写获取文本样式的方法
     getTextStyle() {
        
        
       const {
        
         refX = 0, refY = 0 } = this.properties // 从属性中提取参考点
       const style = super.getTextStyle