@ebiz/designer-components 0.0.18-beta.30 → 0.0.18-beta.32

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

@@ -1,211 +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;
-        });
-    }
-}
-
-
-
+/**
+ * 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

@@ -1,120 +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}`;
-    }
-}
-
-
+/**
+ * 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}`;
+    }
+}
+
+