@ebiz/designer-components 0.0.18

package/src/components/charts/components/CircleProcessChart/handleOption.js

@@ -0,0 +1,68 @@
+/**
+ * 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 defendXSS from '../../util/defendXSS';
+import chartToken from './chartToken';
+// 获取bar的series数据
+export function getSeriesData(data) {
+  const seriesData = [];
+  data.forEach((item, i) => {
+    seriesData[i] = [];
+    seriesData[i][0] = item.value;
+  });
+  return seriesData;
+}
+
+function tooltipFormatter(params) {
+  const seriesName = params.seriesName;
+  const color = params.color;
+  const value = params.value;
+  const htmlString = `<div>
+                            <span style="display:inline-block;width:10px;height:10px;
+                            margin-right:8px;border-radius:5px;border-style: solid;border-width:1px;
+                            border-color:${defendXSS(color)};background-color:${defendXSS(color)};"></span>
+                            <span style="margin-right:16px">${defendXSS(seriesName)}</span>
+                            <span>${defendXSS(value)}</span>
+                       </div>`;
+  return htmlString;
+}
+
+/**
+ * 配置默认的鼠标悬浮提示框
+ */
+export function setTooltip(baseOpt) {
+  if (!baseOpt.tooltip.formatter) {
+    baseOpt.tooltip.formatter = tooltipFormatter;
+  }
+}
+
+/**
+ * 配置Title
+ */
+export function setTitle(iChartOption) {
+  const { title } = iChartOption;
+  if (!title.subtextStyle || !title.subtextStyle?.color) {
+    if (!title.subtextStyle) title.subtextStyle = {}
+    title.subtextStyle.color = chartToken.descRichColor
+  }
+  if (!title.textStyle || !title.textStyle?.color) {
+    if (!title.textStyle) title.textStyle = {}
+    title.textStyle.color = chartToken.detailRichColor
+  }
+  if (title.textStyle && title.textStyle.rich) {
+    for (const key in title.textStyle.rich) {
+      const element = title.textStyle.rich[key];
+      if (!element.color) {
+        element.color = chartToken.detailRichColor
+      }
+    }
+  }
+}

package/src/components/charts/components/CircleProcessChart/handleSeries.js

@@ -0,0 +1,127 @@
+/**
+ * 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 chartToken from './chartToken';
+import { emptySeriesUnit } from '../GaugeChart/handleSeries';
+import cloneDeep from '../../util/cloneDeep';
+import Token from '../../feature/token';
+
+function getSeriesInit() {
+  return {
+    type: 'bar',
+    coordinateSystem: 'polar',
+    emphasis: {
+      focus: 'series',
+    },
+    animation: false,
+    stack: 'total',
+    showBackground: true,
+    backgroundStyle: {
+      color: '',
+    },
+    data: [],
+  };
+}
+
+export function setSeries(seriesData, iChartOption, chartInstance) {
+  const { data, itemStyle, markLine } = iChartOption;
+  const series = [];
+  const barWidth = Number(iChartOption.barWidth) || chartToken.barWidth;
+  data.forEach((item, i) => {
+    const seriesUnit = getSeriesInit();
+    seriesUnit.name = item.name;
+    seriesUnit.data = seriesData[i];
+    seriesUnit.itemStyle = item.itemStyle || itemStyle;
+    seriesUnit.backgroundStyle.color = chartToken.background;
+    seriesUnit.barWidth = barWidth;
+    seriesUnit.emphasis = iChartOption.emphasis;
+    series.push(seriesUnit);
+  });
+  // 阈值线
+  if (markLine) {
+    const markLineUnit = setMarkLine(data, markLine,  iChartOption, chartInstance, barWidth);
+    series.push(markLineUnit);
+  }
+  return series;
+}
+
+function getThemeStatusColor(status = 'success'){
+  const {colorError, colorAlert, colorWarning, colorSuccess} = Token.config.colorState
+  const statusColorGroup = {
+    error: colorError,
+    alert: colorAlert,
+    warning: colorWarning,
+    success: colorSuccess
+  }
+  return statusColorGroup[status]
+}
+
+// 添加一个空series，使用该空series的pointer来作为阈值线的红线
+function setMarkLine(data, markLine, iChartOption, chartInstance, barWidth) {
+  let {color, status='success', value} = markLine;
+  const  marklineColor = getThemeStatusColor(status);
+  const temp = cloneDeep(emptySeriesUnit);
+  const markLineUnit = cloneDeep(temp);
+  if(data[0].value > value){
+    color = '#FFFFFF'
+  }
+  markLineUnit.name = 'markLine';
+  markLineUnit.min = iChartOption.min || 0;
+  markLineUnit.max = iChartOption.max || 100;
+  markLineUnit.startAngle = 90;
+  markLineUnit.endAngle = -270;
+  markLineUnit.center = iChartOption.position.center || ['50%', '50%'];
+  markLineUnit.radius = iChartOption.position.radius || '50%';
+  markLineUnit.animation = false;
+  let pointerOffsetCenter = computeMarkLinePosition(markLineUnit.radius, barWidth, chartInstance);
+  markLineUnit.pointer = {
+    icon: 'path://M0 0 L30 0 L30 100 L0 100 Z',
+    width: 2,
+    length: barWidth / 2 ,
+    offsetCenter: iChartOption.markLine.offsetCenter || [0,  -pointerOffsetCenter],
+    itemStyle: {
+      color:  color || marklineColor,
+    }
+  };
+  markLineUnit.data = [{ value: markLine.value }];
+  markLineUnit.silent = true;
+  markLineUnit.zlevel = 2;
+  return markLineUnit;
+}
+
+// 计算阈值线位置 
+function computeMarkLinePosition(radius, barWidth, chartInstance){
+  let position;
+  const width = chartInstance.getWidth();
+  const height = chartInstance.getHeight();
+  const canvasRadius = width > height ? height / 2 : width / 2;
+  if(typeof radius === 'number'){
+    position = radius / 2 - (barWidth / 4) 
+  }else if(radius.indexOf('%')>-1){
+    radius = Number(radius.slice(0,-1)) / 100;
+    position = radius*canvasRadius / 2 - (barWidth / 4)
+  }else if(typeof radius === 'string'){
+    position = Number(radius) / 2 - (barWidth / 4)
+  }
+  return position
+}
+
+// 更新阈值线位置
+export function updateMarkLine(iChartOption, eChartOption, chartInstance){
+  let radius = iChartOption.position.radius || '50%';
+  const barWidth = Number(iChartOption.barWidth) || chartToken.barWidth;
+  const pointerOffsetCenter = computeMarkLinePosition(radius, barWidth, chartInstance);
+  eChartOption.series.forEach(item=>{
+    if(item.name === 'markLine'){
+      item.pointer.offsetCenter = iChartOption.markLine.offsetCenter || [0,  -pointerOffsetCenter];
+    }
+  })
+}

package/src/components/charts/components/CircleProcessChart/index.js

@@ -0,0 +1,63 @@
+/**
+ * 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 init from '../../option/init';
+import mini from '../../feature/mini/miniCircleProcessChart';
+import { getSeriesData, setTooltip, setTitle } from './handleOption';
+import { setSeries, updateMarkLine } from './handleSeries';
+import PolarCoordSys from '../../option/PolarSys';
+import { CHART_TYPE } from '../../util/constants';
+import { mergeSeries } from '../../util/merge';
+
+export default class CircleProcessChart {
+
+  static name = CHART_TYPE.CIRCLE_PROCESS;
+
+  constructor(iChartOption, chartInstance) {
+    this.baseOption = {};
+    this.iChartOption = {};
+    // 组装 iChartOption, 补全默认值
+    this.iChartOption = init(iChartOption);
+    this.chartInstance = chartInstance;
+    // 根据 iChartOption 组装 baseOption
+    this.updateOption(chartInstance);
+  }
+
+  updateOption(chartInstance) {
+    const iChartOption = this.iChartOption;
+    // 装载除series之外的其他配置
+    PolarCoordSys(this.baseOption, iChartOption, CHART_TYPE.CIRCLE_PROCESS);
+    // tooltip悬浮框
+    setTooltip(this.baseOption);
+    // legend数据
+    this.baseOption.legend.data = iChartOption.data;
+    // series bar数据
+    const seriesData = getSeriesData(iChartOption.data);
+    this.baseOption.series = setSeries(seriesData, iChartOption, chartInstance);
+    // 范围设置
+    this.baseOption.angleAxis.max = iChartOption.max || 100;
+    if( this.baseOption.title) setTitle(iChartOption);
+    mergeSeries(iChartOption, this.baseOption);
+    mini(iChartOption, this.baseOption);
+  }
+
+  getOption() {
+    return this.baseOption;
+  }
+
+  resize(callback) {
+    // 有阈值线时，更新阈值线位置
+    if(this.iChartOption.markLine){
+      updateMarkLine(this.iChartOption, this.baseOption, this.chartInstance)
+    }
+    callback(this.baseOption);
+  }
+}

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

@@ -0,0 +1,211 @@
+/**
+ * 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 dagre from './dagre';
+import { isObject,isNumber } from '../../util/type';
+
+const VALID_DIRECTIONS = [
+    'LR', // left to right
+    'RL', // right to left
+    'TB', // top to bottom
+    'BT', // bottom to top
+    'H',  // horizontal
+    'V'   // vertical
+];
+
+const VDirection = ['TB', 'BT', 'V'];
+
+let NODE_WIDTH = 50;
+let NODE_HEIGHT = 50;
+let originalNodes = []
+let originalEdges = []
+/**
+ * 根据传入数据的 nodes 和 edges 计算出绘制流程图需要的位置信息
+ * 包括节点位置和边的位置
+ */
+export default class Layout {
+    data;
+
+    constructor(data, option, containerSize) {
+        originalNodes = Object.assign([],data.nodes);
+        originalEdges = Object.assign([],data.edges);
+        this.data = data;
+        // 执行位置算法
+        this.doLayout(data, option);
+        // 将整个图移动到container中心, 将节点位置同步到this.data.nodes和this.data.edges中
+        this.revisePosn(containerSize, option.position);
+    }
+
+    /**
+     * 执行位置算法
+     */
+    doLayout(data, options) {
+      data.nodes.forEach((v,i)=>{
+          if(i===0){
+            NODE_WIDTH = v.width;
+            NODE_HEIGHT = v.height;
+          }else{
+            if(v.width > NODE_WIDTH){
+              NODE_WIDTH = v.width
+            }
+            if(v.height > NODE_HEIGHT){
+              NODE_HEIGHT = v.height
+            }
+          }
+        })
+        let g = new dagre.graphlib.Graph();
+        g.setDefaultEdgeLabel(()=> {
+            return {};
+        });
+        g.setGraph({
+            rankdir: options.direction || VALID_DIRECTIONS[0],
+            nodesep: (VDirection.includes(options.direction) ? options.hGap : options.vGap) || 50,
+            ranksep: (VDirection.includes(options.direction) ? options.vGap : options.hGap) || 50,
+        });
+        // TODO：此处要缺少计算level的算法
+
+        // 对于跨level的node链接，需要在level中间添加虚拟节点，以完善节点布局
+        // 计算出所有edges边数据
+        let edges = [];
+        originalEdges.forEach((item) => {
+          let source = originalNodes.find((node) => node.id === item.source);
+          let target = originalNodes.find((node) => node.id === item.target);
+          edges.push({
+              source: item.source,
+              target: item.target,
+              sourceLevel: source.level,
+              targetLevel: target.level,
+          })
+        });
+        // 获取跨level的边数据
+        let specialEdges = edges.filter((item) => {
+            return item.targetLevel - item.sourceLevel > 1 || item.targetLevel === 'undefined' || item.sourceLevel === 'undefined'
+        });
+        // 从edges中删除跨level的连线数据
+        specialEdges.forEach((item) => {
+            let index = -1;
+            originalEdges.forEach((edge, i) => {
+                if (edge.source === item.source && edge.target === item.target) {
+                    index = i
+                }
+            })
+            originalEdges.splice(index, 1);
+        });
+        // 根据跨level的连线增加虚拟节点和虚拟连线
+        specialEdges.forEach((item) => {
+            let id = 'virtual_' + item.target + '_' + item.source;
+            originalNodes.push({
+                id,
+                width: NODE_WIDTH,
+                height: NODE_HEIGHT,
+                innerWidth: NODE_WIDTH,
+                innerHeight: NODE_HEIGHT
+            });
+            originalEdges.push({
+                source: item.source,
+                target: id,
+            });
+            originalEdges.push({
+                source: id,
+                target: item.target,
+            });
+        });
+        // 给dagre赋值、执行布局算法
+        originalNodes.forEach((node)=> {
+            g.setNode(node.id, {
+                id: node.id,
+                level: node.level,
+                width: node.width,
+                height: node.height,
+            });
+        });
+        originalEdges.forEach((edge)=> {
+            g.setEdge(edge.source, edge.target);
+        });
+        dagre.layout(g);
+        let nodes = [];
+        g.nodes().forEach((node)=> {
+            let coord = g.node(node);
+            let obj = {
+                id: coord.id,
+                level: coord.level,
+                x: coord.x,
+                y: coord.y,
+            }
+            nodes.push(obj)
+        });
+        nodes.forEach((node)=> {
+            let current = originalNodes.find((item) => item.id === node.id);
+            if (current) {
+                current.x = node.x;
+                current.y = node.y;
+            }
+        });
+        // 用户自定义node位置修正
+        originalNodes.forEach((node)=> {
+            if(node.offset){
+                node.offset(node)
+            }
+        });
+        data.allNodes = originalNodes;
+    };
+
+
+    /**
+     * 1. 将图移动到container中心
+     * 2. 将节点位置和连线位置同步到this.data中
+     */
+    revisePosn(containerSize, position) {
+        let minX = 99999;
+        let maxX = -99999;
+        let minY = 99999;
+        let maxY = -99999;
+        originalNodes.forEach(node => {
+            if (minX > node.x) {
+                minX = node.x
+            };
+            if (minY > node.y) {
+                minY = node.y
+            };
+            if (maxX < (node.x + node.width)) {
+                maxX = node.x + node.width
+            };
+            if (maxY < (node.y + node.height)) {
+                maxY = node.y + node.height
+            };
+        });
+
+        // 默认居中显示
+        let reviseX = containerSize.width / 2 - (maxX + minX) / 2;
+        let reviseY = containerSize.height / 2 - (maxY + minY) / 2;
+        let hasPosition = false;
+        if(position && isObject(position)){
+          hasPosition = true;
+          let topVal = position.top;
+          let leftVal = position.left;
+          reviseY = isNumber(topVal) ? topVal : (topVal.includes('px') ? Number.parseInt(topVal) : containerSize.height*(Number.parseFloat(topVal)/100))
+          reviseX = isNumber(leftVal) ? leftVal : (leftVal.includes('px') ? Number.parseInt(leftVal) : containerSize.width*(Number.parseFloat(leftVal)/100))
+        }
+        let revise = {
+            x: reviseX,
+            y: reviseY
+        }
+        this.data.nodesObj = {};
+        originalNodes.forEach(node => {
+            node.x = node.x + revise.x - (hasPosition ? 25 : 0) - node.width/2;
+            node.y = node.y + revise.y - (hasPosition ? 25 : 0) - node.height/2;
+            this.data.nodesObj[node.id] = node;
+        });
+    }
+}
+
+
+

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

@@ -0,0 +1,120 @@
+/**
+ * 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 LineBezier {
+    // 水平直线占横向距离的百分比
+    lineDistance = 0.15;
+    // 贝塞尔曲线控制点
+    bezierDistance = 0.6;
+
+    constructor(option) {
+        this.lineDistance = option.lineDistance || 0.15;
+        this.bezierDistance = option.bezierDistance || 0.6;
+    }
+
+    setData(edge, data, direction) {
+        if(VDirection.indexOf(direction) !== -1){
+            this.setTargetDataV(edge, data);
+        }else{
+            this.setTargetData(edge, data);
+        }
+    }
+
+    setTargetData(edge, data) {
+        let end = edge.target;
+        let start = edge.source;
+        let nodesObj = data.nodesObj;
+        // 起始点
+        edge.startPoint = {
+            x: nodesObj[start].x + nodesObj[start].width + ( nodesObj[start].innerWidth - nodesObj[start].width ) / 2-data.minX,
+            y: nodesObj[start].y + nodesObj[start].height / 2-data.minY,
+        };
+        // 结束点
+        edge.endPoint = {
+            x: nodesObj[end].x - ( nodesObj[end].innerWidth - nodesObj[end].width ) / 2-data.minX,
+            y: nodesObj[end].y + nodesObj[end].height / 2-data.minY,
+        };
+        let hDis = edge.endPoint.x - edge.startPoint.x;
+        let vDis = edge.endPoint.y - edge.startPoint.y;
+        // 贝塞尔曲线起始点
+        edge.bezierStartPoint = {
+            x: edge.startPoint.x + hDis * this.lineDistance,
+            y: edge.startPoint.y,
+        }
+        // 贝塞尔曲线第一个控制点
+        edge.bezierFirstControlPoint = {
+            x: edge.bezierStartPoint.x + hDis * this.bezierDistance,
+            y: edge.bezierStartPoint.y,
+        };
+        // 贝塞尔曲线结束点
+        edge.bezierEndPoint = {
+            x: edge.endPoint.x - hDis * this.lineDistance,
+            y: edge.endPoint.y,
+        };
+        // 贝塞尔曲线第二个控制点
+        edge.bezierSecondControlPoint = {
+            x: edge.bezierEndPoint.x - hDis * this.bezierDistance,
+            y: edge.bezierEndPoint.y,
+        };
+    }
+
+    setTargetDataV(edge, data) {
+        let end = edge.target;
+        let start = edge.source;
+        let nodesObj = data.nodesObj;
+        // 起始点
+        edge.startPoint = {
+            x: nodesObj[start].x + nodesObj[start].width / 2-data.minX,
+            y: nodesObj[start].y + nodesObj[start].height + ( nodesObj[start].innerHeight - nodesObj[start].height ) / 2-data.minY,
+        };
+        // 结束点
+        edge.endPoint = {
+            x: nodesObj[end].x + nodesObj[end].width / 2-data.minX,
+            y: nodesObj[end].y - ( nodesObj[end].innerHeight - nodesObj[end].height ) / 2-data.minY,
+        };
+        let hDis = edge.endPoint.x - edge.startPoint.x;
+        let vDis = edge.endPoint.y - edge.startPoint.y;
+        // 贝塞尔曲线起始点
+        edge.bezierStartPoint = {
+            x: edge.startPoint.x,
+            y: edge.startPoint.y  + vDis * this.lineDistance,
+        }
+        // 贝塞尔曲线第一个控制点
+        edge.bezierFirstControlPoint = {
+            x: edge.bezierStartPoint.x,
+            y: edge.bezierStartPoint.y  + vDis * this.bezierDistance,
+        };
+        // 贝塞尔曲线结束点
+        edge.bezierEndPoint = {
+            x: edge.endPoint.x,
+            y: edge.endPoint.y - vDis * this.lineDistance,
+        };
+        // 贝塞尔曲线第二个控制点
+        edge.bezierSecondControlPoint = {
+            x: edge.bezierEndPoint.x,
+            y: edge.bezierEndPoint.y  - vDis * this.bezierDistance,
+        };
+    }
+
+    setPath(edge) {
+        let a = `M${edge.startPoint.x} ${edge.startPoint.y}`;
+        let b = `L${edge.bezierStartPoint.x} ${edge.bezierStartPoint.y}`;
+        let c = `C${edge.bezierFirstControlPoint.x} ${edge.bezierFirstControlPoint.y} ${edge.bezierSecondControlPoint.x} ${edge.bezierSecondControlPoint.y} ${edge.bezierEndPoint.x} ${edge.bezierEndPoint.y}`;
+        let d = `L${edge.endPoint.x} ${edge.endPoint.y}`;
+        return `${a} ${b} ${c} ${d}`;
+    }
+}
+
+

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

@@ -0,0 +1,42 @@
+/**
+ * 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.
+ *
+ */
+
+// 直连线
+export default class LineDirect {
+
+    constructor(option, contains) {
+        this.gcontainer = contains.gcontainer;
+        this.tagContainer = contains.tagContainer;
+    }
+
+    setData(edge, data, direction) {
+        let end = edge.target;
+        let start = edge.source;
+        let nodesObj = data.nodesObj;
+        // 起始点
+        edge.startPoint = {
+            x: nodesObj[start].x + nodesObj[start].width / 2-data.minX,
+            y: nodesObj[start].y + nodesObj[start].height / 2-data.minY,
+        };
+        // 结束点
+        edge.endPoint = {
+            x: nodesObj[end].x + nodesObj[end].width / 2-data.minX,
+            y: nodesObj[end].y + nodesObj[end].height / 2-data.minY,
+        };
+    }
+
+    setPath (edge){
+        let m = `M${edge.startPoint.x} ${edge.startPoint.y}`;
+        let l = `L${edge.endPoint.x} ${edge.endPoint.y}`;
+        return `${m} ${l}`;
+    }
+}