@ebiz/designer-components 0.0.18

package/src/components/charts/components/FlowChart/LineManager.js

@@ -0,0 +1,278 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import LineRound from './LineRound';
+import LineBezier from './LineBezier';
+import LineDirect from './LineDirect';
+import { createTransLine, transLine } from './LineMode';
+import { NODE_ID_PREFIX } from './NodeManager';
+import { attr, addClass, createSvgByTag } from './util';
+
+const LINE_ID_PREFIX = 'fc-line-';
+const TYPE_ROUND = 'Round';
+const TYPE_BEZIER = 'Bezier';
+const TYPE_Direct = 'Direct';
+const TYPE_STRAIGHT = 'Straight';
+
+const defaultStyle = {
+    width: 1,
+    color: '#c2c2c2',
+    type: TYPE_ROUND,
+};
+
+const LineFactory = {
+    [TYPE_ROUND]: LineRound,
+    [TYPE_Direct]: LineDirect,
+    [TYPE_BEZIER]: LineBezier,
+    [TYPE_STRAIGHT]: LineRound
+}
+
+// 流程线仅支持直线和折线图
+const transLineType = ['Direct', 'Round', 'Straight'];
+export default class LineManager {
+    // 连线样式
+    style;
+    // 连线数据计算器
+    lineCreator;
+    // 连线方向
+    direction;
+
+    constructor(data, container, tagContainer, containerPosn, option) {
+        this.data = data;
+        this.option = option;
+        this.tagContainer = tagContainer;
+        this.direction = option.direction;
+        this.initColor(option);
+        this.style = Object.assign({},defaultStyle, option.lineStyle);
+        this.createLineCreator(container);
+        this.initArrow();
+        this.container = container;
+        this.containerPosn = containerPosn;
+        this.getLineAlignStyle(data.edges);
+        this.createLines(data.edges);
+        this.connectVirtualLine(data.edges);
+        this.createTags(data.edges);
+    }
+
+    initColor(option) {
+        if (option.theme && option.theme === 'dark') {
+            defaultStyle.color = '#ffffff';
+        }
+    }
+
+    initArrow() {
+        let arrow = document.getElementById('markerArrow');
+        let color = this.style.color || '#c2c2c2';
+        attr(arrow, 'fill', color);
+    }
+
+    /**
+     * 生成连线数据计算器
+     */
+    createLineCreator(container) {
+        if(this.style.type === TYPE_STRAIGHT){
+            this.style.radius = 0;
+        }
+        const CreatorClass = LineFactory[this.style.type];
+        this.lineCreator = new CreatorClass(this.style, {
+            gContainer: container,
+            tagContainer: this.tagContainer
+        });
+    }
+
+    /**
+     *
+     * 计算连线的对齐方式，是向前对齐，还是向后对齐
+     */
+    getLineAlignStyle(edges){
+        edges.forEach(edge => {
+            if(!edge.alignType){
+                let sameSource = edges.filter(item =>{
+                    return (item.source === edge.source) && (item !== edge)
+                });
+                if(sameSource.length > 0){
+                    edge.alignType = 'source';
+                    sameSource.forEach(item => {
+                        item.alignType = 'source';
+                    });
+                }
+            }
+        });
+        edges.forEach(edge => {
+            if(!edge.alignType){
+                edge.alignType = 'target';
+            }
+        });
+    }
+
+    /**
+     * 计算连线数据
+     */
+    setData(edge) {
+        if(edge?.lineStyle?.type){ // edge节点应用自身设置的连线样式
+            const CreatorClass = LineFactory[edge?.lineStyle?.type];
+            let lineCreator= new CreatorClass(edge?.lineStyle, {
+                gContainer: this.container,
+                tagContainer: this.tagContainer
+            })
+            return lineCreator.setData(edge, this.data, this.direction);
+        }else{
+            this.lineCreator.setData(edge, this.data, this.direction);
+        }
+        // 用户自定义edge位置修正
+        if (edge.offset) {
+            edge.offset(edge)
+        }
+    }
+
+    /**
+     * 拼接连线信息
+     */
+    setPath(edge) {
+        if(edge?.lineStyle?.type){ // edge节点应用自身设置的连线样式
+            const CreatorClass = LineFactory[edge?.lineStyle?.type];
+            let lineCreator= new CreatorClass(edge?.lineStyle, {
+                gContainer: this.container,
+                tagContainer: this.tagContainer
+            })
+            return lineCreator.setPath(edge)
+        }else{
+            return this.lineCreator.setPath(edge);
+        }
+    }
+
+    // 根据数据创建连线
+    createLines(edges) {
+        edges.forEach(edge => {
+            this.setData(edge);
+            let path = this.createLine(edge);
+            this.container.appendChild(path);
+        });
+    }
+
+    // 创建连线dom
+    createLine(edge) {
+        let path = createSvgByTag('path');
+        let id = LINE_ID_PREFIX + edge.source + '-to-' + edge.target;
+        let d = this.setPath(edge);
+        edge.id = id;
+        attr(path, 'd', d);
+        attr(path, 'id', id);
+        if (this.style.color) {
+            attr(path, 'stroke', this.style.color);
+        }
+        if (this.style.dash || this.style.mode === 'dash') {
+            attr(path, 'stroke-dasharray', 5);
+        }
+        if (edge.lineStyle && edge.lineStyle.color) {
+            attr(path, 'stroke', edge.lineStyle.color);
+        }
+        if (edge.lineStyle && ( edge.lineStyle.dash || edge.lineStyle.mode === 'dash')) {
+            attr(path, 'stroke-dasharray', 5);
+        }
+        if (edge.lineStyle && edge.lineStyle.dash === false) {
+            attr(path, 'stroke-dasharray', 0);
+        }
+        if (this.style.width) {
+            attr(path, 'stroke-width', this.style.width + 'px');
+        }
+        if (edge.lineStyle && edge.lineStyle.width) {
+            attr(path, 'stroke-width', edge.lineStyle.width + 'px');
+        }
+        addClass(path, 'fc-line');
+        // type为Direct  不添加箭头
+        const noDirect=edge?.lineStyle?.type===TYPE_Direct||this.style.type===TYPE_Direct
+        addClass(path,noDirect?'fc-noArrow':'')
+
+        if (this.isTransLine(edge)) {
+          path = createTransLine(d, transLine(edge, id, edge.lineStyle?.transPattern || this.style.transPattern))
+        }else{
+          let childNode = document.getElementById(edge.id)
+          childNode && document.getElementById('fc-trans-container').removeChild(childNode)
+        }
+        return path;
+    }
+
+    // 是否是流程线
+    isTransLine(edge){
+      let isTrans = false;
+      if(transLineType.includes(this.style.type)){
+        if(this.style.mode === 'trans'){
+          isTrans = true;
+          if('lineStyle' in edge && 'mode' in edge.lineStyle){
+            if(edge.lineStyle.mode !== 'trans'){
+              isTrans = false;
+            }
+          }
+        }else{
+          if('lineStyle' in edge && 'mode' in edge.lineStyle && edge.lineStyle.mode === 'trans'){
+            isTrans = true;
+          }
+        }
+      }
+      return isTrans;
+    }
+
+    // 将两段虚拟连线链接起来
+    connectVirtualLine(edges){
+        // 取出所有 target 为 virtual 的连线
+        let targetVirtualEdges = edges.filter((edge) => {
+          return edge.target.includes('virtual');
+        });
+        // 取出所有 source 为  virtual 的连线
+        let sourceVirtualEdges = edges.filter((edge) => {
+          return edge.source.includes('virtual');
+        });
+        targetVirtualEdges.forEach(targetEdge => {
+            let sourceEdge = sourceVirtualEdges.filter(item=> item.source === targetEdge.target)[0];
+            let targetEdgeDom = this.container.querySelector(`#${targetEdge.id}`);
+            let sourceEdgeDom = this.container.querySelector(`#${sourceEdge.id}`);
+            sourceEdgeDom.remove();
+            let newPath =  targetEdgeDom.getAttribute('d') + ' L' + sourceEdgeDom.getAttribute('d').slice(1);
+            let newId = LINE_ID_PREFIX + targetEdge.source + '-to-' + sourceEdge.target;
+            targetEdgeDom.setAttribute('d', newPath);
+            targetEdgeDom.setAttribute('id', newId);
+        });
+    }
+
+    createTags(edges){
+        edges.forEach(edge => {
+            this.option.renderTag && this.option.renderTag(this.tagContainer, edge);
+        });
+    }
+
+
+    // 更新连线
+    updateLine(domId) {
+        let nodeId = domId?.replace(NODE_ID_PREFIX, '');
+        this.data.edges.forEach(edge => {
+            if (edge.source === nodeId || edge.target === nodeId) {
+                this.setData(edge);
+                let id = LINE_ID_PREFIX + edge.source + '-to-' + edge.target;
+                if(this.isTransLine(edge)){
+                  let parentNode = document.getElementById('fc-trans-container')
+                  let updateChild = document.getElementById(id)
+                  updateChild && parentNode.removeChild(updateChild);
+                  createTransLine(this.setPath(edge), transLine(edge, id, edge.lineStyle?.transPattern || this.style.transPattern))
+                }
+                  document.getElementById(id)?.setAttribute('d', this.setPath(edge));
+            }
+        });
+    }
+
+    // 更新所有连线
+    updateAllLine () {
+        this.data.nodes.forEach((node)=>{
+            let domId = node.dom?.id || node.id;
+            this.updateLine(domId);
+        })
+    }
+}

package/src/components/charts/components/FlowChart/LineMode.js

@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import { attr } from './util';
+
+// 创建流程线
+function createTransLine(d, data) {
+  let transDiv = document.createElement('div');
+  let str = '';
+  for (let i = 0; i < data.length; i++) {
+    str += `<div class="fc-trans-point" style="offset-path:path('${d}');offset-distance:${Number(100 * i / data.length) + 1}%;"></div>`
+  }
+  transDiv.insertAdjacentHTML('beforeend', str);
+  let cloneNode = transDiv.cloneNode(true);
+  attr(cloneNode, 'id', data.id)
+  let childArr = cloneNode.childNodes;
+  for(let i of childArr){
+    data.transPattern && (i.style.background = `url(${data.transPattern})`);
+  }
+  document.getElementById('fc-trans-container').appendChild(cloneNode);
+  return transDiv;
+}
+
+// 计算trans线段长度
+function transLine(edge, id ,transPattern){
+  let XLineLength = Math.abs(edge.endPoint.x - edge.startPoint.x);
+  let YLineLength = Math.abs(edge.endPoint.y - edge.startPoint.y);
+  let data = {
+    id,
+    length: Math.ceil((XLineLength + YLineLength) / 6),
+    transPattern
+  }
+  return data;
+}
+
+export { createTransLine, transLine }

package/src/components/charts/components/FlowChart/LineRound.js

@@ -0,0 +1,335 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+const VDirection = ['TB', 'BT', 'V'];
+const HDirection = ['LR', 'RL', 'H'];
+
+// 圆角曲线连线
+export default class LineRound {
+    // 默认圆弧拐角的 radius 为 20
+    radius = 10;
+    // 连线向前多少开始拐弯
+    dis = 15;
+    // 直角拐点占水平距离的百分比
+    lineDistance = 0.5;
+
+    constructor(option) {
+        this.radius = option.radius === undefined ? this.radius : option.radius;
+        this.lineDistance = option.lineDistance || 0.5;
+    }
+
+    /**
+     * 以lineRound作为试点，连线有两种对齐方式：
+     * 1. 默认为向后对齐，即向target节点对齐，优先级低
+     * 2. 然后再将source节点出来的连线向前对齐，优先级高
+     */
+    setData(edge, data, direction) {
+        if(VDirection.indexOf(direction) !== -1){
+            if(edge.alignType == 'target'){
+                this.setTargetDataV(edge, data);
+            }else if(edge.alignType == 'source'){
+                this.setSourceDataV(edge, data);
+            }
+        }else{
+            if(edge.alignType == 'target'){
+                this.setTargetData(edge, data);
+            }else if(edge.alignType == 'source'){
+                this.setSourceData(edge, data);
+            }
+        }
+    }
+
+    // 计算出以目标节点为对齐方式的连线数据
+    setTargetData(targetEdge, data){
+        let end = targetEdge.target;
+        let start = targetEdge.source;
+        let nodesObj = data.nodesObj;
+        let startWidth = nodesObj[start].width || 50;
+        let startInnerWidth = nodesObj[start].innerWidth || 50;
+        let startHeight = nodesObj[start].height || 50;
+        let endWidth = nodesObj[end].width || 50;
+        let endInnerWidth = nodesObj[end].innerWidth || 50;
+        let endHeight = nodesObj[end].height || 50;
+        // 拐角半径
+        targetEdge.radius = this.radius;
+        // 起始点
+        targetEdge.startPoint = {
+            x: nodesObj[start].x + startWidth + ( startInnerWidth - startWidth ) / 2-data.minX,
+            y: nodesObj[start].y + startHeight / 2-data.minY,
+        };
+        // 结束点
+        targetEdge.endPoint = {
+            x: nodesObj[end].x - ( endInnerWidth - endWidth ) / 2-data.minX,
+            y: nodesObj[end].y + endHeight / 2-data.minY,
+        };
+        let vDis = targetEdge.endPoint.y - targetEdge.startPoint.y;
+        // endPoint向左距离20点位置开始绘制曲线
+        let hDis = this.dis;
+
+        // radius 根据 vDis 大小而动态调整
+        if(Math.abs(vDis) <= this.radius * 2){
+            targetEdge.radius = Math.abs(vDis) / 2;
+        }
+
+        let revise = targetEdge.radius;
+        // 当end节点在start节点下方时，个别点的位置需要修正
+        if(targetEdge.endPoint.y < targetEdge.startPoint.y){
+            revise = -targetEdge.radius
+        }
+        // 第一个圆弧起始点
+        targetEdge.firstRoundStartPoint = {
+            x: targetEdge.endPoint.x  - hDis - targetEdge.radius * 2,
+            y: targetEdge.startPoint.y,
+        }
+        // 第一个圆弧控制点
+        targetEdge.firstRoundControlPoint = {
+            x: targetEdge.endPoint.x - hDis - targetEdge.radius,
+            y: targetEdge.startPoint.y,
+        }
+        // 第一个圆弧结束点
+        targetEdge.firstRoundEndPoint = {
+            x: targetEdge.endPoint.x - hDis - targetEdge.radius,
+            y: targetEdge.startPoint.y + revise,
+        };
+        // 第二个圆弧起始点
+        targetEdge.secondRoundStartPoint = {
+            x: targetEdge.endPoint.x - hDis - targetEdge.radius,
+            y: targetEdge.endPoint.y - revise,
+        };
+        // 第二个圆弧控制点
+        targetEdge.secondRoundControlPoint = {
+            x: targetEdge.endPoint.x - hDis - targetEdge.radius,
+            y: targetEdge.endPoint.y,
+        };
+        // 第二个圆弧结束点
+        targetEdge.secondRoundEndPoint = {
+            x: targetEdge.endPoint.x - hDis,
+            y: targetEdge.endPoint.y,
+        };
+    }
+
+    // 计算出以源头节点为对齐方式的连线数据
+    setSourceData(edge, data){
+        let end = edge.target;
+        let start = edge.source;
+        let nodesObj = data.nodesObj;
+        let startWidth = nodesObj[start].width || 50;
+        let startInnerWidth = nodesObj[start].innerWidth || 50;
+        let startHeight = nodesObj[start].height || 50;
+        let endWidth = nodesObj[end].width || 50;
+        let endInnerWidth = nodesObj[end].innerWidth || 50;
+        let endHeight = nodesObj[end].height || 50;
+        // 拐角半径
+        edge.radius = this.radius;
+        // 起始点
+        edge.startPoint = {
+            x: nodesObj[start].x + startWidth + ( startInnerWidth - startWidth ) / 2-data.minX,
+            y: nodesObj[start].y + startHeight / 2-data.minY,
+        };
+        // 结束点
+        edge.endPoint = {
+            x: nodesObj[end].x - ( endInnerWidth - endWidth ) / 2-data.minX,
+            y: nodesObj[end].y + endHeight / 2-data.minY,
+        };
+        let vDis = edge.endPoint.y - edge.startPoint.y;
+        // endPoint向左距离20点位置开始绘制曲线
+        let hDis = this.dis;
+
+        // radius 根据 vDis 大小而动态调整
+        if(Math.abs(vDis) <= this.radius * 2){
+            edge.radius = Math.abs(vDis) / 2;
+        }
+
+        let revise = edge.radius;
+        // 当end节点在start节点下方时，个别点的位置需要修正
+        if(edge.endPoint.y < edge.startPoint.y){
+            revise = -edge.radius
+        }
+        // 第一个圆弧起始点
+        edge.firstRoundStartPoint = {
+            x: edge.startPoint.x  + hDis,
+            y: edge.startPoint.y,
+        }
+        // 第一个圆弧控制点
+        edge.firstRoundControlPoint = {
+            x: edge.startPoint.x + hDis + edge.radius,
+            y: edge.startPoint.y,
+        }
+        // 第一个圆弧结束点
+        edge.firstRoundEndPoint = {
+            x: edge.startPoint.x + hDis + edge.radius,
+            y: edge.startPoint.y + revise,
+        };
+        // 第二个圆弧起始点
+        edge.secondRoundStartPoint = {
+            x: edge.startPoint.x + hDis + edge.radius,
+            y: edge.endPoint.y - revise,
+        };
+        // 第二个圆弧控制点
+        edge.secondRoundControlPoint = {
+            x: edge.startPoint.x + hDis + edge.radius,
+            y: edge.endPoint.y,
+        };
+        // 第二个圆弧结束点
+        edge.secondRoundEndPoint = {
+            x: edge.startPoint.x + hDis + edge.radius * 2,
+            y: edge.endPoint.y,
+        };
+    }
+
+    // 计算出以目标节点为对齐方式的连线数据 --- 纵向
+    setTargetDataV(targetEdge, data){
+        let end = targetEdge.target;
+        let start = targetEdge.source;
+        let nodesObj = data.nodesObj;
+        let startWidth = nodesObj[start].width || 50;
+        let startInnerHeight = nodesObj[start].innerHeight || 50;
+        let startHeight = nodesObj[start].height || 50;
+        let endWidth = nodesObj[end].width || 50;
+        let endInnerHeight = nodesObj[end].innerHeight || 50;
+        let endHeight = nodesObj[end].height || 50;
+        // 拐角半径
+        targetEdge.radius = this.radius;
+        // 起始点
+        targetEdge.startPoint = {
+            x: nodesObj[start].x + startWidth / 2-data.minX,
+            y: nodesObj[start].y + startHeight + ( startInnerHeight - startHeight ) / 2-data.minY,
+        };
+        // 结束点
+        targetEdge.endPoint = {
+            x: nodesObj[end].x + endWidth / 2-data.minX,
+            y: nodesObj[end].y - ( endInnerHeight - endHeight ) / 2-data.minY,
+        };
+        let hDis = targetEdge.endPoint.x - targetEdge.startPoint.x;
+        // endPoint向上距离20点位置开始绘制曲线
+        let vDis = this.dis;
+
+        // radius 根据 vDis 大小而动态调整
+        if(Math.abs(hDis) <= this.radius * 2){
+            targetEdge.radius = Math.abs(hDis) / 2;
+        }
+
+        let revise = targetEdge.radius;
+        // 当end节点在start节点左方时，个别点的位置需要修正
+        if(targetEdge.endPoint.x < targetEdge.startPoint.x){
+            revise = -targetEdge.radius
+        }
+        // 第一个圆弧起始点
+        targetEdge.firstRoundStartPoint = {
+            x: targetEdge.startPoint.x,
+            y: targetEdge.endPoint.y  - vDis - targetEdge.radius * 2,
+        }
+        // 第一个圆弧控制点
+        targetEdge.firstRoundControlPoint = {
+            x: targetEdge.startPoint.x,
+            y: targetEdge.endPoint.y  - vDis - targetEdge.radius,
+        }
+        // 第一个圆弧结束点
+        targetEdge.firstRoundEndPoint = {
+            x: targetEdge.startPoint.x + revise,
+            y: targetEdge.endPoint.y - vDis - targetEdge.radius,
+        };
+        // 第二个圆弧起始点
+        targetEdge.secondRoundStartPoint = {
+            x: targetEdge.endPoint.x - revise,
+            y: targetEdge.endPoint.y - vDis - targetEdge.radius,
+        };
+        // 第二个圆弧控制点
+        targetEdge.secondRoundControlPoint = {
+            x: targetEdge.endPoint.x,
+            y: targetEdge.endPoint.y - vDis - targetEdge.radius,
+        };
+        // 第二个圆弧结束点
+        targetEdge.secondRoundEndPoint = {
+            x: targetEdge.endPoint.x,
+            y: targetEdge.endPoint.y - vDis,
+        };
+    }
+
+    // 计算出以源头节点为对齐方式的连线数据  --- 纵向
+    setSourceDataV(edge, data){
+        let end = edge.target;
+        let start = edge.source;
+        let nodesObj = data.nodesObj;
+        let startWidth = nodesObj[start].width || 50;
+        let startInnerHeight = nodesObj[start].innerHeight || 50;
+        let startHeight = nodesObj[start].height || 50;
+        let endWidth = nodesObj[end].width || 50;
+        let endInnerHeight = nodesObj[end].innerHeight || 50;
+        let endHeight = nodesObj[end].height || 50;
+        // 拐角半径
+        edge.radius = this.radius;
+        // 起始点
+        edge.startPoint = {
+            x: nodesObj[start].x + startWidth / 2-data.minX,
+            y: nodesObj[start].y + startHeight  + ( startInnerHeight - startHeight ) / 2-data.minY,
+        };
+        // 结束点
+        edge.endPoint = {
+            x: nodesObj[end].x + endWidth / 2-data.minX,
+            y: nodesObj[end].y - ( endInnerHeight - endHeight ) / 2-data.minY,
+        };
+        let hDis = edge.endPoint.x - edge.startPoint.x;
+        // endPoint向上距离20点位置开始绘制曲线
+        let vDis = this.dis;
+
+        // radius 根据 vDis 大小而动态调整
+        if(Math.abs(hDis) <= this.radius * 2){
+            edge.radius = Math.abs(hDis) / 2;
+        }
+
+        let revise = edge.radius;
+        // 当end节点在start节点左方时，个别点的位置需要修正
+        if(edge.endPoint.x < edge.startPoint.x){
+            revise = -edge.radius
+        }
+        // 第一个圆弧起始点
+        edge.firstRoundStartPoint = {
+            x: edge.startPoint.x,
+            y: edge.startPoint.y  + vDis,
+        }
+        // 第一个圆弧控制点
+        edge.firstRoundControlPoint = {
+            x: edge.startPoint.x,
+            y: edge.startPoint.y  + vDis + edge.radius,
+        }
+        // 第一个圆弧结束点
+        edge.firstRoundEndPoint = {
+            x: edge.startPoint.x + revise,
+            y: edge.startPoint.y  + vDis + edge.radius,
+        };
+        // 第二个圆弧起始点
+        edge.secondRoundStartPoint = {
+            x: edge.endPoint.x - revise,
+            y: edge.startPoint.y  + vDis + edge.radius,
+        };
+        // 第二个圆弧控制点
+        edge.secondRoundControlPoint = {
+            x: edge.endPoint.x,
+            y: edge.startPoint.y  + vDis + edge.radius,
+        };
+        // 第二个圆弧结束点
+        edge.secondRoundEndPoint = {
+            x: edge.endPoint.x,
+            y: edge.startPoint.y  + vDis + edge.radius * 2,
+        };
+    }
+
+    setPath (edge){
+        let m =  `M${edge.startPoint.x} ${edge.startPoint.y}`;
+        let l1 = `L${edge.firstRoundStartPoint.x} ${edge.firstRoundStartPoint.y}`;
+        let q1 = `Q${edge.firstRoundControlPoint.x} ${edge.firstRoundControlPoint.y} ${edge.firstRoundEndPoint.x} ${edge.firstRoundEndPoint.y}`;
+        let l2 = `L${edge.secondRoundStartPoint.x} ${edge.secondRoundStartPoint.y}`;
+        let q2 = `Q${edge.secondRoundControlPoint.x} ${edge.secondRoundControlPoint.y} ${edge.secondRoundEndPoint.x} ${edge.secondRoundEndPoint.y}`;
+        let l3 = `L${edge.endPoint.x} ${edge.endPoint.y}`;
+        return `${m} ${l1} ${q1} ${l2} ${q2} ${l3}`;
+    }
+}