@logicflow/extension 1.2.0-alpha.8 → 1.2.0-next.0

package/cjs/materials/group/index.js

@@ -51,10 +51,17 @@ var Group = /** @class */ (function () {
                 preGroup.setAllowAppendChild(false);
             }
             // 然后再判断这个节点是否在某个group中，如果在，则将其添加到对应的group中
-            var bounds = _this.lf.getNodeModelById(data.id).getBounds();
-            var group = _this.getGroup(bounds);
+            var group = _this.getGroup(_this.lf.getNodeModelById(data.id));
             if (!group)
                 return;
+            var isAllowAppendIn = group.isAllowAppendIn(data);
+            if (!isAllowAppendIn) {
+                _this.lf.emit('group:not-allowed', {
+                    group: group.getData(),
+                    node: data,
+                });
+                return;
+            }
             if (data.id !== group.id) {
                 group.addChild(data.id);
                 _this.nodeGroupMap.set(data.id, group.id);
@@ -79,39 +86,49 @@ var Group = /** @class */ (function () {
         this.setActiveGroup = function (_a) {
             var data = _a.data;
             var nodeModel = _this.lf.getNodeModelById(data.id);
-            if (nodeModel.isGroup)
+            var newGroup = _this.getGroup(nodeModel);
+            if (_this.activeGroup) {
+                _this.activeGroup.setAllowAppendChild(false);
+            }
+            if (!newGroup || (nodeModel.isGroup && newGroup.id === data.id))
+                return;
+            var isAllowAppendIn = newGroup.isAllowAppendIn(data);
+            if (!isAllowAppendIn) {
                 return;
-            var bounds = nodeModel.getBounds();
-            var newGroup = _this.getGroup(bounds);
-            if (newGroup || newGroup !== _this.activeGroup) {
-                if (_this.activeGroup) {
-                    _this.activeGroup.setAllowAppendChild(false);
-                }
-                if (newGroup) {
-                    _this.activeGroup = newGroup;
-                    _this.activeGroup.setAllowAppendChild(true);
-                }
             }
+            _this.activeGroup = newGroup;
+            _this.activeGroup.setAllowAppendChild(true);
         };
         lf.register(GroupNode_1.default);
         this.lf = lf;
         lf.graphModel.addNodeMoveRules(function (model, deltaX, deltaY) {
             if (model.isGroup) { // 如果移动的是分组，那么分组的子节点也跟着移动。
-                lf.graphModel.moveNodes(__spread(model.children), deltaX, deltaY, true);
+                var nodeIds = _this.getNodeAllChild(model);
+                lf.graphModel.moveNodes(nodeIds, deltaX, deltaY, true);
                 return true;
             }
             var groupModel = lf.getNodeModelById(_this.nodeGroupMap.get(model.id));
-            if (groupModel && groupModel.isRestrict) { // 如果移动的节点存在分组中，且这个分组禁止子节点移出去。
+            var allowMove = true;
+            if (groupModel && groupModel.isRestrict) {
+                // 如果移动的节点存在分组中，且这个分组禁止子节点移出去。
                 var _a = model.getBounds(), x1 = _a.x1, y1 = _a.y1, x2 = _a.x2, y2 = _a.y2;
-                var r = groupModel.isAllowMoveTo({
+                allowMove = groupModel.isAllowMoveTo({
                     x1: x1 + deltaX,
                     y1: y1 + deltaY,
                     x2: x2 + deltaX,
                     y2: y2 + deltaY,
                 });
-                return r;
             }
-            return true;
+            if (model.isGroup) {
+                // 如果移动的是分组，那么分组的子节点也跟着移动。
+                if (allowMove === true) {
+                    lf.graphModel.moveNodes(__spread(model.getChildren()), deltaX, deltaY, true);
+                }
+                else if (typeof allowMove !== 'boolean') {
+                    lf.graphModel.moveNodes(__spread(model.getChildren()), allowMove.x ? deltaX : 0, allowMove.y ? deltaY : 0, true);
+                }
+            }
+            return allowMove;
         });
         lf.graphModel.group = this;
         lf.on('node:add', this.appendNodeToGroup);
@@ -121,17 +138,52 @@ var Group = /** @class */ (function () {
         lf.on('node:drag', this.setActiveGroup);
         lf.on('graph:rendered', this.graphRendered);
     }
+    /**
+     * 获取一个节点内部所有的子节点，包裹分组的子节点
+     */
+    Group.prototype.getNodeAllChild = function (model) {
+        var _this = this;
+        var nodeIds = [];
+        if (model.children) {
+            model.children.forEach(function (nodeId) {
+                nodeIds.push(nodeId);
+                var nodeModel = _this.lf.getNodeModelById(nodeId);
+                if (nodeModel.isGroup) {
+                    nodeIds = nodeIds.concat(_this.getNodeAllChild(nodeModel));
+                }
+            });
+        }
+        return nodeIds;
+    };
     /**
      * 获取自定位置其所属分组
      */
-    Group.prototype.getGroup = function (bounds) {
+    Group.prototype.getGroup = function (nodeModel) {
+        if (nodeModel.nestable === false) {
+            return null;
+        }
+        var bounds = nodeModel.getBounds();
         var nodes = this.lf.graphModel.nodes;
+        var selectedModel = null;
         for (var i = 0; i < nodes.length; i++) {
             var model = nodes[i];
-            if (model.isGroup && model.isInRange(bounds)) {
-                return model;
+            if (model !== nodeModel && model.isGroup && model.isInRange(bounds)) {
+                if (selectedModel) {
+                    if (selectedModel.zIndex > model.zIndex) {
+                        selectedModel = model;
+                    }
+                    else if (selectedModel.zIndex === model.zIndex) {
+                        if (!model.isInRange(selectedModel.getBounds())) {
+                            selectedModel = model;
+                        }
+                    }
+                }
+                else {
+                    selectedModel = model;
+                }
             }
         }
+        return selectedModel;
     };
     /**
      * 获取某个节点所属的groupModel

package/cjs/tools/snapshot/index.js

@@ -164,7 +164,7 @@ var Snapshot = /** @class */ (function () {
         真实dom存在缩放影响其宽高数值
         在得到真实宽高后除以缩放比例即可得到正常宽高
         */
-        var base = document.getElementsByClassName('lf-base')[0];
+        var base = this.lf.graphModel.rootEl.querySelector('.lf-base');
         var bbox = base.getBoundingClientRect();
         var graphModel = this.lf.graphModel;
         var transformModel = graphModel.transformModel;

package/cjs/turbo-adapter/index.js

@@ -84,7 +84,7 @@ function convertEdgeToTurboElement(edge) {
         outgoing: [targetNodeId],
         type: getTurboType(type),
         dockers: [],
-        properties: __assign(__assign({}, properties), { name: (text && text.value) || '', text: text, startPoint: JSON.stringify(startPoint), endPoint: JSON.stringify(endPoint), pointsList: JSON.stringify(text) }),
+        properties: __assign(__assign({}, properties), { name: (text && text.value) || '', text: text, startPoint: JSON.stringify(startPoint), endPoint: JSON.stringify(endPoint), pointsList: JSON.stringify(pointsList) }),
         key: id,
     };
 }
@@ -123,16 +123,13 @@ function convertFlowElementToEdge(element) {
         properties: {},
     };
     if (startPoint) {
-        // @ts-ignore
         edge.startPoint = JSON.parse(startPoint);
     }
     if (endPoint) {
-        // @ts-ignore
         edge.endPoint = JSON.parse(endPoint);
     }
     if (pointsList) {
-        // @ts-ignore
-        edge.endPoint = JSON.parse(pointsList);
+        edge.pointsList = JSON.parse(pointsList);
     }
     // 这种转换方式，在自定义属性中不能与excludeProperties中的属性重名，否则将在转换过程中丢失
     var excludeProperties = ['startPoint', 'endPoint', 'pointsList', 'text'];
@@ -147,6 +144,7 @@ function convertFlowElementToEdge(element) {
 function convertFlowElementToNode(element) {
     var properties = element.properties, key = element.key, type = element.type, bounds = element.bounds;
     var x = properties.x, y = properties.y;
+    var text = properties.text;
     if (x === undefined) {
         var _a = __read(bounds, 2), _b = _a[0], x1 = _b.x, y1 = _b.y, _c = _a[1], x2 = _c.x, y2 = _c.y;
         x = (x1 + x2) / 2;
@@ -157,7 +155,7 @@ function convertFlowElementToNode(element) {
         type: TurboTypeMap[type],
         x: x,
         y: y,
-        text: properties.text,
+        text: text,
         properties: {},
     };
     // 这种转换方式，在自定义属性中不能与excludeProperties中的属性重名，否则将在转换过程中丢失

package/es/NodeResize/Control/Control.d.ts

@@ -53,6 +53,10 @@ declare class Control extends Component<IProps> {
         deltaX: any;
         deltaY: any;
     }) => void;
+    /**
+     * 由于将拖拽放大缩小改成丝滑模式，这个时候需要在拖拽结束的时候，将节点的位置更新到grid上.
+     */
+    onDragEnd: () => void;
     render(): h.JSX.Element;
 }
 export default Control;

package/es/NodeResize/Control/Control.js

@@ -22,6 +22,22 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 import { h, Component } from 'preact';
 import { LogicFlowUtil } from '@logicflow/core';
 import Rect from '../BasicShape/Rect';
@@ -55,7 +71,7 @@ var Control = /** @class */ (function (_super) {
                     resize.height = height - deltaY * pct;
                     break;
                 case 2:
-                    resize.width = width + deltaX;
+                    resize.width = width + deltaX * pct;
                     resize.height = height + deltaY * pct;
                     break;
                 case 3:
@@ -165,9 +181,9 @@ var Control = /** @class */ (function (_super) {
             _this.updatePosition({ deltaX: deltaX, deltaY: deltaY });
             // 更新rx ry,宽高为计算属性自动更新
             // @ts-ignore
-            _this.nodeModel.rx = _this.nodeModel.rx + deltaX / 2;
+            _this.nodeModel.rx = size.width;
             // @ts-ignore
-            _this.nodeModel.ry = _this.nodeModel.ry + deltaY / 2;
+            _this.nodeModel.ry = size.height;
             _this.nodeModel.setProperties({
                 nodeSize: {
                     rx: size.width,
@@ -229,9 +245,9 @@ var Control = /** @class */ (function (_super) {
             _this.updatePosition({ deltaX: deltaX, deltaY: deltaY });
             // 更新rx ry,宽高为计算属性自动更新
             // @ts-ignore
-            _this.nodeModel.rx = _this.nodeModel.rx + deltaX / 2;
+            _this.nodeModel.rx = size.width;
             // @ts-ignore
-            _this.nodeModel.ry = _this.nodeModel.ry + deltaY / 2;
+            _this.nodeModel.ry = size.height;
             _this.nodeModel.setProperties({
                 nodeSize: {
                     rx: size.width,
@@ -273,8 +289,11 @@ var Control = /** @class */ (function (_super) {
             _this.graphModel.eventCenter.emit('node:resize', { oldNodeSize: oldNodeSize, newNodeSize: newNodeSize });
         };
         _this.onDragging = function (_a) {
+            var _b;
             var deltaX = _a.deltaX, deltaY = _a.deltaY;
+            var transformModel = _this.graphModel.transformModel;
             var modelType = _this.nodeModel.modelType;
+            _b = __read(transformModel.fixDeltaXY(deltaX, deltaY), 2), deltaX = _b[0], deltaY = _b[1];
             // html和矩形的计算方式是一样的，共用一个方法
             if (modelType === ModelType.RECT_NODE || modelType === ModelType.HTML_NODE) {
                 _this.updateRect({ deltaX: deltaX, deltaY: deltaY });
@@ -287,23 +306,32 @@ var Control = /** @class */ (function (_super) {
                 _this.updateDiamond({ deltaX: deltaX, deltaY: deltaY });
             }
         };
+        /**
+         * 由于将拖拽放大缩小改成丝滑模式，这个时候需要在拖拽结束的时候，将节点的位置更新到grid上.
+         */
+        _this.onDragEnd = function () {
+            var _a = _this.graphModel.gridSize, gridSize = _a === void 0 ? 1 : _a;
+            var x = gridSize * Math.round(_this.nodeModel.x / gridSize);
+            var y = gridSize * Math.round(_this.nodeModel.y / gridSize);
+            _this.nodeModel.moveTo(x, y);
+        };
         _this.index = props.index;
         _this.nodeModel = props.model;
         _this.graphModel = props.graphModel;
-        var gridSize = _this.graphModel.gridSize;
         // 为保证对齐线功能正常使用，step默认是网格grid的两倍，
         // 没有网格设置，默认为2，保证坐标是整数
-        var step = 2;
-        if (gridSize > 1) {
-            step = 2 * gridSize;
-        }
-        if (_this.nodeModel.gridSize) {
-            step = 2 * _this.nodeModel.gridSize;
-        }
+        // let step = 2;
+        // if (gridSize > 1) {
+        //   step = 2 * gridSize;
+        // }
+        // if (this.nodeModel.gridSize) {
+        //   step = 2 * this.nodeModel.gridSize;
+        // }
         _this.state = {};
         _this.dragHandler = new StepDrag({
             onDragging: _this.onDragging,
-            step: step,
+            onDragEnd: _this.onDragEnd,
+            step: 1,
         });
         return _this;
     }

package/es/NodeResize/Node/DiamondResize.js

@@ -48,6 +48,9 @@ var DiamondResizeModel = /** @class */ (function (_super) {
     };
     DiamondResizeModel.prototype.getOutlineStyle = function () {
         var style = _super.prototype.getOutlineStyle.call(this);
+        var isSilentMode = this.graphModel.editConfigModel.isSilentMode;
+        if (isSilentMode)
+            return style;
         style.stroke = 'none';
         if (style.hover) {
             style.hover.stroke = 'none';
@@ -89,10 +92,10 @@ var DiamondResizeView = /** @class */ (function (_super) {
             h(Polygon, __assign({}, style, { points: points }))));
     };
     DiamondResizeView.prototype.getShape = function () {
-        var isSelected = this.props.model.isSelected;
+        var _a = this.props, isSelected = _a.model.isSelected, isSilentMode = _a.graphModel.editConfigModel.isSilentMode;
         return (h("g", null,
             this.getResizeShape(),
-            isSelected ? this.getControlGroup() : ''));
+            isSelected && !isSilentMode ? this.getControlGroup() : ''));
     };
     return DiamondResizeView;
 }(DiamondNode));

package/es/NodeResize/Node/EllipseResize.js

@@ -35,6 +35,9 @@ var EllipseResizeModel = /** @class */ (function (_super) {
     };
     EllipseResizeModel.prototype.getOutlineStyle = function () {
         var style = _super.prototype.getOutlineStyle.call(this);
+        var isSilentMode = this.graphModel.editConfigModel.isSilentMode;
+        if (isSilentMode)
+            return style;
         style.stroke = 'none';
         if (style.hover) {
             style.hover.stroke = 'none';
@@ -72,10 +75,10 @@ var EllipseResizeView = /** @class */ (function (_super) {
         return _super.prototype.getShape.call(this);
     };
     EllipseResizeView.prototype.getShape = function () {
-        var model = this.props.model;
+        var _a = this.props, model = _a.model, isSilentMode = _a.graphModel.editConfigModel.isSilentMode;
         return (h("g", null,
             this.getResizeShape(),
-            model.isSelected ? this.getControlGroup() : ''));
+            model.isSelected && !isSilentMode ? this.getControlGroup() : ''));
     };
     return EllipseResizeView;
 }(EllipseNode));

package/es/NodeResize/Node/HtmlResize.js

@@ -35,6 +35,9 @@ var HtmlResizeModel = /** @class */ (function (_super) {
     };
     HtmlResizeModel.prototype.getOutlineStyle = function () {
         var style = _super.prototype.getOutlineStyle.call(this);
+        var isSilentMode = this.graphModel.editConfigModel.isSilentMode;
+        if (isSilentMode)
+            return style;
         style.stroke = 'none';
         if (style.hover) {
             style.hover.stroke = 'none';
@@ -72,10 +75,10 @@ var HtmlResizeView = /** @class */ (function (_super) {
         return _super.prototype.getShape.call(this);
     };
     HtmlResizeView.prototype.getShape = function () {
-        var isSelected = this.props.model.isSelected;
+        var _a = this.props, isSelected = _a.model.isSelected, isSilentMode = _a.graphModel.editConfigModel.isSilentMode;
         return (h("g", null,
             this.getResizeShape(),
-            isSelected ? this.getControlGroup() : ''));
+            isSelected && !isSilentMode ? this.getControlGroup() : ''));
     };
     return HtmlResizeView;
 }(HtmlNode));

package/es/NodeResize/Node/RectResize.js

@@ -35,6 +35,9 @@ var RectResizeModel = /** @class */ (function (_super) {
     };
     RectResizeModel.prototype.getOutlineStyle = function () {
         var style = _super.prototype.getOutlineStyle.call(this);
+        var isSilentMode = this.graphModel.editConfigModel.isSilentMode;
+        if (isSilentMode)
+            return style;
         style.stroke = 'none';
         if (style.hover) {
             style.hover.stroke = 'none';
@@ -76,10 +79,10 @@ var RectResizeView = /** @class */ (function (_super) {
         return _super.prototype.getShape.call(this);
     };
     RectResizeView.prototype.getShape = function () {
-        var isSelected = this.props.model.isSelected;
+        var _a = this.props, isSelected = _a.model.isSelected, isSilentMode = _a.graphModel.editConfigModel.isSilentMode;
         return (h("g", null,
             this.getResizeShape(),
-            isSelected ? this.getControlGroup() : ''));
+            isSelected && !isSilentMode ? this.getControlGroup() : ''));
     };
     return RectResizeView;
 }(RectNode));

package/es/bpmn-adapter/json2xml.js

@@ -23,7 +23,6 @@ function toXml(v, name, ind, deep) {
         xml += addIndSpace(ind, deep) + "<" + name;
         for (var m in v) {
             if (m.charAt(0) == "-") {
-                console.log(m, v[m]);
                 xml += " " + m.substr(1) + "=\"" + v[m].toString() + "\"";
             }
             else {

package/es/components/mini-map/index.d.ts

@@ -68,6 +68,7 @@ declare class MiniMap {
     }): void;
     __createViewPort(): void;
     __startDrag: (e: any) => void;
+    moveViewport: (top: any, left: any) => void;
     __drag: (e: any) => void;
     __drop: () => void;
 }

package/es/components/mini-map/index.js

@@ -61,12 +61,17 @@ var MiniMap = /** @class */ (function () {
                 y: e.y,
             };
         };
-        this.__drag = function (e) {
+        this.moveViewport = function (top, left) {
             var viewStyle = _this.__viewport.style;
-            _this.__viewPortTop += e.y - _this.__startPosition.y;
-            _this.__viewPortLeft += e.x - _this.__startPosition.x;
+            _this.__viewPortTop = top;
+            _this.__viewPortLeft = left;
             viewStyle.top = _this.__viewPortTop + "px";
             viewStyle.left = _this.__viewPortLeft + "px";
+        };
+        this.__drag = function (e) {
+            var top = _this.__viewPortTop + e.y - _this.__startPosition.y;
+            var left = _this.__viewPortLeft + e.x - _this.__startPosition.x;
+            _this.moveViewport(top, left);
             _this.__startPosition = {
                 x: e.x,
                 y: e.y,
@@ -85,6 +90,21 @@ var MiniMap = /** @class */ (function () {
         this.__drop = function () {
             document.removeEventListener('mousemove', _this.__drag);
             document.removeEventListener('mouseup', _this.__drop);
+            var top = _this.__viewPortTop;
+            var left = _this.__viewPortLeft;
+            if (_this.__viewPortLeft > _this.__width) {
+                left = _this.__width - _this.__viewPortWidth;
+            }
+            if (_this.__viewPortTop > _this.__height) {
+                top = _this.__height - _this.__viewPortHeight;
+            }
+            if (_this.__viewPortLeft < -_this.__width) {
+                left = 0;
+            }
+            if (_this.__viewPortTop < -_this.__height) {
+                top = 0;
+            }
+            _this.moveViewport(top, left);
         };
         this.__lf = lf;
         this.__miniMapWidth = lf.graphModel.width;
@@ -308,7 +328,7 @@ var MiniMap = /** @class */ (function () {
         var graphRatio = (this.__lf.graphModel.width / this.__lf.graphModel.height);
         var realViewPortHeight = realViewPortWidth / graphRatio;
         this.__viewPortTop = TRANSLATE_Y > 0 ? 0 : -TRANSLATE_Y * scale;
-        this.__viewPortLeft = -TRANSLATE_X * scale;
+        this.__viewPortLeft = TRANSLATE_X > 0 ? 0 : -TRANSLATE_X * scale;
         this.__viewPortWidth = realViewPortWidth;
         this.__viewPortHeight = realViewPortHeight;
         viewStyle.top = this.__viewPortTop + "px";

package/es/components/selection-select/index.js

@@ -31,6 +31,7 @@ var SelectionSelect = /** @class */ (function () {
         this.__drawOff = function () {
             document.removeEventListener('mousemove', _this.__draw);
             document.removeEventListener('mouseup', _this.__drawOff);
+            _this.wrapper.oncontextmenu = null;
             _this.__domContainer.removeChild(_this.wrapper);
             var _a = _this.startPoint, x = _a.x, y = _a.y;
             var _b = _this.endPoint, x1 = _b.x, y1 = _b.y;
@@ -40,8 +41,10 @@ var SelectionSelect = /** @class */ (function () {
             }
             var lt = [Math.min(x, x1), Math.min(y, y1)];
             var rt = [Math.max(x, x1), Math.max(y, y1)];
-            var elements = _this.lf.graphModel.getAreaElement(lt, rt, _this.isWholeEdge, _this.isWholeNode);
+            var elements = _this.lf.graphModel.getAreaElement(lt, rt, _this.isWholeEdge, _this.isWholeNode, true);
+            var group = _this.lf.graphModel.group;
             elements.forEach(function (element) {
+                // 如果节点属于分组，则不不选中节点
                 if (_this.isSelectElement(element)) {
                     _this.lf.selectElementById(element.id, true);
                 }
@@ -74,6 +77,9 @@ var SelectionSelect = /** @class */ (function () {
             _this.endPoint = { x: x, y: y };
             var wrapper = document.createElement('div');
             wrapper.className = 'lf-selection-select';
+            wrapper.oncontextmenu = function prevent(ev) {
+                ev.preventDefault();
+            };
             wrapper.style.top = _this.startPoint.y + "px";
             wrapper.style.left = _this.startPoint.x + "px";
             domContainer.appendChild(wrapper);

package/es/materials/curved-edge/index.d.ts

@@ -1,7 +1,8 @@
-import { Extension } from '@logicflow/core';
-interface CurvedEdgePlugin extends Extension {
-    [x: string]: any;
+import { PolylineEdge, PolylineEdgeModel } from '@logicflow/core';
+declare class CurvedEdge extends PolylineEdge {
+    pointFilter(points: any): any;
+    getEdge(): import("preact").VNode<any>;
 }
-declare const CurvedEdge: CurvedEdgePlugin;
-export default CurvedEdge;
-export { CurvedEdge, };
+declare class CurvedEdgeModel extends PolylineEdgeModel {
+}
+export { CurvedEdge, CurvedEdgeModel, };

package/es/materials/curved-edge/index.js

@@ -11,6 +11,17 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __read = (this && this.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) return o;
@@ -28,15 +39,34 @@ var __read = (this && this.__read) || function (o, n) {
     return ar;
 };
 import { PolylineEdge, PolylineEdgeModel, h } from '@logicflow/core';
-var CurvedEdgeView = /** @class */ (function (_super) {
-    __extends(CurvedEdgeView, _super);
-    function CurvedEdgeView() {
+var CurvedEdge = /** @class */ (function (_super) {
+    __extends(CurvedEdge, _super);
+    function CurvedEdge() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    CurvedEdgeView.prototype.getEdge = function () {
-        var _a = this.props.model.getEdgeStyle(), strokeWidth = _a.strokeWidth, stroke = _a.stroke, strokeDashArray = _a.strokeDashArray;
-        var points = this.props.model.points;
-        var points2 = points.split(' ').map(function (p) { return p.split(',').map(function (a) { return Number(a); }); });
+    CurvedEdge.prototype.pointFilter = function (points) {
+        var allPoints = points;
+        var i = 1;
+        while (i < allPoints.length - 1) {
+            var _a = __read(allPoints[i - 1], 2), x = _a[0], y = _a[1];
+            var _b = __read(allPoints[i], 2), x1 = _b[0], y1 = _b[1];
+            var _c = __read(allPoints[i + 1], 2), x2 = _c[0], y2 = _c[1];
+            if ((x === x1 && x1 === x2)
+                || (y === y1 && y1 === y2)) {
+                allPoints.splice(i, 1);
+            }
+            else {
+                i++;
+            }
+        }
+        return allPoints;
+    };
+    CurvedEdge.prototype.getEdge = function () {
+        var model = this.props.model;
+        var points = model.points, isAnimation = model.isAnimation, arrowConfig = model.arrowConfig, _a = model.radius, radius = _a === void 0 ? 5 : _a;
+        var style = model.getEdgeStyle();
+        var animationStyle = model.getEdgeAnimationStyle();
+        var points2 = this.pointFilter(points.split(' ').map(function (p) { return p.split(',').map(function (a) { return Number(a); }); }));
         var _b = __read(points2[0], 2), startX = _b[0], startY = _b[1];
         var d = "M" + startX + " " + startY;
         // 1) 如果一个点不为开始和结束，则在这个点的前后增加弧度开始和结束点。
@@ -44,42 +74,34 @@ var CurvedEdgeView = /** @class */ (function (_super) {
         //    如果x相同则前一个点的x也不变，
         //    y为（这个点的y 大于前一个点的y, 则 为 这个点的y - 5；小于前一个点的y, 则为这个点的y+5）
         //    同理，判断这个点与后一个点的x,y是否相同，如果x相同，则y进行加减，如果y相同，则x进行加减
-        // todo: 好丑，看看怎么优化下
-        var space = 5;
         for (var i = 1; i < points2.length - 1; i++) {
             var _c = __read(points2[i - 1], 2), preX = _c[0], preY = _c[1];
             var _d = __read(points2[i], 2), currentX = _d[0], currentY = _d[1];
             var _e = __read(points2[i + 1], 2), nextX = _e[0], nextY = _e[1];
             if (currentX === preX && currentY !== preY) {
-                var y = currentY > preY ? currentY - space : currentY + space;
+                var y = currentY > preY ? currentY - radius : currentY + radius;
                 d = d + " L " + currentX + " " + y;
             }
             if (currentY === preY && currentX !== preX) {
-                var x = currentX > preX ? currentX - space : currentX + space;
+                var x = currentX > preX ? currentX - radius : currentX + radius;
                 d = d + " L " + x + " " + currentY;
             }
             d = d + " Q " + currentX + " " + currentY;
             if (currentX === nextX && currentY !== nextY) {
-                var y = currentY > nextY ? currentY - space : currentY + space;
+                var y = currentY > nextY ? currentY - radius : currentY + radius;
                 d = d + " " + currentX + " " + y;
             }
             if (currentY === nextY && currentX !== nextX) {
-                var x = currentX > nextX ? currentX - space : currentX + space;
+                var x = currentX > nextX ? currentX - radius : currentX + radius;
                 d = d + " " + x + " " + currentY;
             }
         }
         var _f = __read(points2[points2.length - 1], 2), endX = _f[0], endY = _f[1];
         d = d + " L " + endX + " " + endY;
-        return h('path', {
-            d: d,
-            strokeWidth: strokeWidth,
-            stroke: stroke,
-            fill: 'none',
-            strokeDashArray: strokeDashArray,
-        });
+        var attrs = __assign(__assign(__assign({ d: d, style: isAnimation ? animationStyle : {} }, style), arrowConfig), { fill: 'none' });
+        return h('path', __assign({ d: d }, attrs));
     };
-    CurvedEdgeView.extendKey = 'curvedEdge';
-    return CurvedEdgeView;
+    return CurvedEdge;
 }(PolylineEdge));
 var CurvedEdgeModel = /** @class */ (function (_super) {
     __extends(CurvedEdgeModel, _super);
@@ -88,20 +110,6 @@ var CurvedEdgeModel = /** @class */ (function (_super) {
     }
     return CurvedEdgeModel;
 }(PolylineEdgeModel));
-var CurvedEdge = {
-    pluginName: 'curved-edge',
-    curvedSpace: 5,
-    init: function (_a) {
-        var curvedSpace = _a.curvedSpace;
-        CurvedEdge.curvedSpace = curvedSpace;
-    },
-    install: function (lf) {
-        lf.register({
-            type: 'curved-edge',
-            view: CurvedEdgeView,
-            model: CurvedEdgeModel,
-        });
-    },
-};
-export default CurvedEdge;
-export { CurvedEdge, };
+export { CurvedEdge, 
+// CurvedEdgeView,
+CurvedEdgeModel, };