sqlEdge.js 2.11 KB
/*
 * @Date: 2025-03-12 21:20:42
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-03-12 23:53:01
 * @FilePath: /logic-flow2/src/views/adv-node/anchor/sqlEdge.js
 * @Description: 文件描述
 */
import { BezierEdge, BezierEdgeModel } from '@logicflow/core';

class CustomEdge2 extends BezierEdge {} // 继承贝塞尔曲线边的视图类

class CustomEdgeModel2 extends BezierEdgeModel { // 继承贝塞尔曲线边的模型类
  getEdgeStyle() {
    const style = super.getEdgeStyle();
    // svg属性
    style.strokeWidth = 1;
    style.stroke = '#ababac';
    return style;
  }

  /**
   * 重写此方法,使保存数据是能带上锚点数据。
   */
  getData() {
    const data = super.getData();
    // 保存源节点和目标节点的锚点ID,用于后续恢复连线
    data.sourceAnchorId = this.sourceAnchorId;
    data.targetAnchorId = this.targetAnchorId;
    return data;
  }

  /**
   * 给边自定义方案,使其支持基于锚点的位置更新边的路径
   */
  updatePathByAnchor() {
    // 获取源节点和其锚点
    const sourceNodeModel = this.graphModel.getNodeModelById(this.sourceNodeId);
    const sourceAnchor = sourceNodeModel
      ?.getDefaultAnchor()
      .find((anchor) => anchor.id === this.sourceAnchorId);

      // 获取目标节点和其锚点
    const targetNodeModel = this.graphModel.getNodeModelById(this.targetNodeId);
    const targetAnchor = targetNodeModel
      ?.getDefaultAnchor()
      .find((anchor) => anchor.id === this.targetAnchorId);

    // 更新连线起点
    if (sourceAnchor) {
      const startPoint = {
        x: sourceAnchor?.x,
        y: sourceAnchor?.y,
      };
      this.updateStartPoint(startPoint);
    }

    // 更新连线终点
    if (targetAnchor) {
      const endPoint = {
        x: targetAnchor?.x,
        y: targetAnchor?.y,
      };
      this.updateEndPoint(endPoint);
    }

    // 这里需要将原有的pointsList设置为空,才能触发bezier的自动计算control点。
    this.pointsList = [];
    this.initPoints();
  }
}

export default {
  type: 'sql-edge',
  view: CustomEdge2,
  model: CustomEdgeModel2,
};