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

package/dist/logic-flow.js

@@ -7043,7 +7043,7 @@ $({ target: 'Object', stat: true, forced: FAILS_ON_PRIMITIVES, sham: !CORRECT_PR
 var $ = __webpack_require__(14);
 var getBuiltIn = __webpack_require__(43);
 var apply = __webpack_require__(73);
-var bind = __webpack_require__(194);
+var bind = __webpack_require__(195);
 var aConstructor = __webpack_require__(153);
 var anObject = __webpack_require__(30);
 var isObject = __webpack_require__(31);
@@ -7455,7 +7455,7 @@ module.exports = function (argument) {
 /***/ (function(module, exports, __webpack_require__) {
 
 var $ = __webpack_require__(14);
-var assign = __webpack_require__(196);
+var assign = __webpack_require__(194);
 
 // `Object.assign` method
 // https://tc39.es/ecma262/#sec-object.assign
@@ -7820,7 +7820,7 @@ var $ = __webpack_require__(14);
 var call = __webpack_require__(33);
 var isObject = __webpack_require__(31);
 var anObject = __webpack_require__(30);
-var isDataDescriptor = __webpack_require__(195);
+var isDataDescriptor = __webpack_require__(196);
 var getOwnPropertyDescriptorModule = __webpack_require__(48);
 var getPrototypeOf = __webpack_require__(92);
 
@@ -11337,7 +11337,7 @@ module.exports.f = function (C) {
 /* 161 */
 /***/ (function(module) {
 
-module.exports = JSON.parse("{\"a\":\"1.2.0-alpha.8\"}");
+module.exports = JSON.parse("{\"a\":\"1.2.0-alpha.16\"}");
 
 /***/ }),
 /* 162 */
@@ -13447,57 +13447,6 @@ module.exports = function (matched, str, position, captures, namedCaptures, repl
 
 "use strict";
 
-var global = __webpack_require__(5);
-var uncurryThis = __webpack_require__(13);
-var aCallable = __webpack_require__(52);
-var isObject = __webpack_require__(31);
-var hasOwn = __webpack_require__(32);
-var arraySlice = __webpack_require__(97);
-
-var Function = global.Function;
-var concat = uncurryThis([].concat);
-var join = uncurryThis([].join);
-var factories = {};
-
-var construct = function (C, argsLength, args) {
-  if (!hasOwn(factories, argsLength)) {
-    for (var list = [], i = 0; i < argsLength; i++) list[i] = 'a[' + i + ']';
-    factories[argsLength] = Function('C,a', 'return new C(' + join(list, ',') + ')');
-  } return factories[argsLength](C, args);
-};
-
-// `Function.prototype.bind` method implementation
-// https://tc39.es/ecma262/#sec-function.prototype.bind
-module.exports = Function.bind || function bind(that /* , ...args */) {
-  var F = aCallable(this);
-  var Prototype = F.prototype;
-  var partArgs = arraySlice(arguments, 1);
-  var boundFunction = function bound(/* args... */) {
-    var args = concat(partArgs, arraySlice(arguments));
-    return this instanceof boundFunction ? construct(F, args.length, args) : F.apply(that, args);
-  };
-  if (isObject(Prototype)) boundFunction.prototype = Prototype;
-  return boundFunction;
-};
-
-
-/***/ }),
-/* 195 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var hasOwn = __webpack_require__(32);
-
-module.exports = function (descriptor) {
-  return descriptor !== undefined && (hasOwn(descriptor, 'value') || hasOwn(descriptor, 'writable'));
-};
-
-
-/***/ }),
-/* 196 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
 var DESCRIPTORS = __webpack_require__(34);
 var uncurryThis = __webpack_require__(13);
 var call = __webpack_require__(33);
@@ -13556,6 +13505,57 @@ module.exports = !$assign || fails(function () {
 } : $assign;
 
 
+/***/ }),
+/* 195 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+var global = __webpack_require__(5);
+var uncurryThis = __webpack_require__(13);
+var aCallable = __webpack_require__(52);
+var isObject = __webpack_require__(31);
+var hasOwn = __webpack_require__(32);
+var arraySlice = __webpack_require__(97);
+
+var Function = global.Function;
+var concat = uncurryThis([].concat);
+var join = uncurryThis([].join);
+var factories = {};
+
+var construct = function (C, argsLength, args) {
+  if (!hasOwn(factories, argsLength)) {
+    for (var list = [], i = 0; i < argsLength; i++) list[i] = 'a[' + i + ']';
+    factories[argsLength] = Function('C,a', 'return new C(' + join(list, ',') + ')');
+  } return factories[argsLength](C, args);
+};
+
+// `Function.prototype.bind` method implementation
+// https://tc39.es/ecma262/#sec-function.prototype.bind
+module.exports = Function.bind || function bind(that /* , ...args */) {
+  var F = aCallable(this);
+  var Prototype = F.prototype;
+  var partArgs = arraySlice(arguments, 1);
+  var boundFunction = function bound(/* args... */) {
+    var args = concat(partArgs, arraySlice(arguments));
+    return this instanceof boundFunction ? construct(F, args.length, args) : F.apply(that, args);
+  };
+  if (isObject(Prototype)) boundFunction.prototype = Prototype;
+  return boundFunction;
+};
+
+
+/***/ }),
+/* 196 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var hasOwn = __webpack_require__(32);
+
+module.exports = function (descriptor) {
+  return descriptor !== undefined && (hasOwn(descriptor, 'value') || hasOwn(descriptor, 'writable'));
+};
+
+
 /***/ }),
 /* 197 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -20004,6 +20004,7 @@ var EventType;
   EventType["ANCHOR_DRAGSTART"] = "anchor:dragstart";
   EventType["ANCHOR_DRAG"] = "anchor:drag";
   EventType["ANCHOR_DROP"] = "anchor:drop";
+  EventType["ANCHOR_DRAGEND"] = "anchor:dragend";
   EventType["BLANK_MOUSEDOWN"] = "blank:mousedown";
   EventType["BLANK_DRAGSTART"] = "blank:dragstart";
   EventType["BLANK_DRAG"] = "blank:drag";
@@ -21633,7 +21634,7 @@ var defaultTheme = {
     stroke: 'red',
     strokeDasharray: '10 10',
     strokeDashoffset: '100%',
-    animationName: 'dash',
+    animationName: 'lf-dash',
     animationDuration: '20s',
     animationIterationCount: 'infinite',
     animationTimingFunction: 'linear',
@@ -21951,6 +21952,9 @@ var es_string_replace = __webpack_require__(122);
 // EXTERNAL MODULE: /Users/didi/niu-workspace/LogicFlow/node_modules/core-js/modules/es.number.max-safe-integer.js
 var es_number_max_safe_integer = __webpack_require__(77);
 
+// EXTERNAL MODULE: /Users/didi/niu-workspace/LogicFlow/node_modules/core-js/modules/es.object.assign.js
+var es_object_assign = __webpack_require__(27);
+
 // EXTERNAL MODULE: /Users/didi/niu-workspace/LogicFlow/node_modules/core-js/modules/es.object.set-prototype-of.js
 var es_object_set_prototype_of = __webpack_require__(10);
 
@@ -21963,9 +21967,6 @@ var es_reflect_construct = __webpack_require__(12);
 // EXTERNAL MODULE: /Users/didi/niu-workspace/LogicFlow/node_modules/core-js/modules/es.reflect.get.js
 var es_reflect_get = __webpack_require__(44);
 
-// EXTERNAL MODULE: /Users/didi/niu-workspace/LogicFlow/node_modules/core-js/modules/es.object.assign.js
-var es_object_assign = __webpack_require__(27);
-
 // CONCATENATED MODULE: ./node_modules/uuid/dist/esm-browser/rng.js
 // Unique ID creation requires a high quality random # generator. In the browser we therefore
 // require the crypto API and do not support built-in fallback to lower quality random number
@@ -22497,7 +22498,8 @@ var node_getCrossPointWithPolygon = function getCrossPointWithPolygon(point, dir
 }; // 规范节点初始化数据
 
 var node_pickNodeConfig = function pickNodeConfig(data) {
-  var nodeData = lodash_es_pick(data, ['id', 'type', 'x', 'y', 'text', 'properties']);
+  var nodeData = lodash_es_pick(data, ['id', 'type', 'x', 'y', 'text', 'properties', 'virtual' // 区域节点是否为dnd添加的虚拟节点
+  ]);
   return nodeData;
 };
 /**
@@ -22824,6 +22826,15 @@ var BaseEdgeModel_BaseEdgeModel = /*#__PURE__*/function () {
       if (overlapMode === OverlapMode.INCREASE) {
         this.zIndex = data.zIndex || getZIndex();
       }
+
+      this.arrowConfig.markerEnd = "url(#marker-end-".concat(this.id, ")"); // 设置边的 anchors，也就是边的两个端点
+      // 端点依赖于 edgeData 的 sourceNode 和 targetNode
+
+      this.setAnchors(); // 边的拐点依赖于两个端点
+
+      this.initPoints(); // 文本位置依赖于边上的所有拐点
+
+      this.formatText(data);
     }
     /**
      * 设置model属性，每次properties发生变化会触发
@@ -23048,6 +23059,12 @@ var BaseEdgeModel_BaseEdgeModel = /*#__PURE__*/function () {
       });
       this.setAttributes();
     }
+  }, {
+    key: "deleteProperty",
+    value: function deleteProperty(key) {
+      delete this.properties[key];
+      this.setAttributes();
+    }
   }, {
     key: "setProperties",
     value: function setProperties(properties) {
@@ -23057,6 +23074,23 @@ var BaseEdgeModel_BaseEdgeModel = /*#__PURE__*/function () {
         data: properties
       });
       this.setAttributes();
+    }
+  }, {
+    key: "changeEdgeId",
+    value: function changeEdgeId(id) {
+      var _this$arrowConfig = this.arrowConfig,
+          markerEnd = _this$arrowConfig.markerEnd,
+          markerStart = _this$arrowConfig.markerStart;
+
+      if (markerStart && markerStart === "url(#marker-start-".concat(this.id, ")")) {
+        this.arrowConfig.markerStart = "url(#marker-start-".concat(id, ")");
+      }
+
+      if (markerEnd && markerEnd === "url(#marker-end-".concat(this.id, ")")) {
+        this.arrowConfig.markerEnd = "url(#marker-end-".concat(id, ")");
+      }
+
+      this.id = id;
     } // 设置样式
 
   }, {
@@ -23217,6 +23251,10 @@ var BaseEdgeModel_BaseEdgeModel = /*#__PURE__*/function () {
     value: function setSelected() {
       var flag = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
       this.isSelected = flag;
+
+      if (this.graphModel.overlapMode === OverlapMode.DEFAULT) {
+        this.zIndex = flag ? ElementMaxZIndex : 0;
+      }
     }
   }, {
     key: "setHovered",
@@ -24000,7 +24038,6 @@ var PolylineEdgeModel_PolylineEdgeModel = /*#__PURE__*/function (_BaseEdgeModel)
           }
         }
 
-        draggingPointList = pointFilter(draggingPointList);
         this.updatePointsAfterDrag(draggingPointList); // step3: 调整到对应外框的位置后，执行updatePointsAfterDrag，找到当前线段和图形的准确交点
 
         this.draggingPointList = draggingPointList;
@@ -24029,7 +24066,7 @@ var PolylineEdgeModel_PolylineEdgeModel = /*#__PURE__*/function (_BaseEdgeModel)
           var _inNode2 = isInNode(_startPosition, this.sourceNode);
 
           if (!_inNode2) {
-            // FIXME: 如果某一条边上没有任何锚点，会有问题
+            // FIXME: 如果某一节点上没有任何锚点，会有问题
             var _anchorList3 = this.sourceNode.anchors;
             _draggingPointList = this.getDraggingPoints(direction, 'start', _startPosition, _anchorList3, _draggingPointList);
           }
@@ -24049,7 +24086,6 @@ var PolylineEdgeModel_PolylineEdgeModel = /*#__PURE__*/function (_BaseEdgeModel)
           }
         }
 
-        _draggingPointList = pointFilter(_draggingPointList);
         this.updatePointsAfterDrag(_draggingPointList);
         this.draggingPointList = _draggingPointList;
       }
@@ -24067,7 +24103,7 @@ var PolylineEdgeModel_PolylineEdgeModel = /*#__PURE__*/function (_BaseEdgeModel)
     key: "dragAppendEnd",
     value: function dragAppendEnd() {
       if (this.draggingPointList) {
-        var pointsList = points2PointsList(this.points); // draggingPointList清空
+        var pointsList = pointFilter(points2PointsList(this.points)); // draggingPointList清空
 
         this.draggingPointList = []; // 更新起终点
 
@@ -24194,6 +24230,27 @@ var getVerticalPointOfLine = function getVerticalPointOfLine(config) {
 
   return pointPosition;
 };
+// CONCATENATED MODULE: ./src/util/vector.ts
+var getDirectionVector = function getDirectionVector(point1, point2) {
+  var a = point2.x - point1.x;
+  var b = point2.y - point1.y;
+
+  if (a !== 0) {
+    a = a / Math.abs(a);
+  }
+
+  if (b !== 0) {
+    b = b / Math.abs(b);
+  }
+
+  return [a, b];
+};
+var isSameDirection = function isSameDirection(v1, v2) {
+  return v1[0] === v2[0] && v1[1] === v2[1];
+};
+var isContraryDirection = function isContraryDirection(v1, v2) {
+  return !(v1[0] + v2[0] || v1[1] + v2[1]);
+};
 // CONCATENATED MODULE: ./src/util/edge.ts
 function edge_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -24250,6 +24307,8 @@ function edge_arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 
 
+
+
 
 
 
@@ -24326,16 +24385,21 @@ var getExpandedBBox = function getExpandedBBox(bbox, offset) {
  */
 
 var edge_pointDirection = function pointDirection(point, node) {
-  var yDistance = point.y - node.y;
-  var xDistance = point.x - node.x;
-  if (yDistance === 0) return SegmentDirection.HORIZONTAL;
-  if (xDistance === 0) return SegmentDirection.VERTICAL;
+  var dx = Math.abs(point.x - node.x);
+  var dy = Math.abs(point.y - node.y);
+  var width = node.width,
+      height = node.height;
+  var hDistance = width / 2 - dx; // 锚点距离节点左右两边的最小距离，值大于0表示在minX与maxX之间
 
-  if (point.x > node.x - node.width / 2 && point.x < node.x + node.width / 2) {
-    return SegmentDirection.VERTICAL;
-  }
+  var vDistance = height / 2 - dy; // 锚点距离节点上下两边的最小距离，值大于0表示在minY与maxY之间
+
+  if (hDistance > 0 && vDistance > 0) {
+    // 锚点在节点内部，寻找与锚点距离最近的边的方向
+    return hDistance < vDistance ? SegmentDirection.HORIZONTAL : SegmentDirection.VERTICAL;
+  } // 锚点在节点边上或者节点外部，比较锚点斜率(dy/dx)与节点斜率(height/width)
 
-  return SegmentDirection.HORIZONTAL;
+
+  return dx / node.width > dy / node.height ? SegmentDirection.HORIZONTAL : SegmentDirection.VERTICAL;
 };
 /* 获取扩展图形上的点，即起始终点相邻的点，上一个或者下一个节点 */
 
@@ -24985,14 +25049,58 @@ var edge_getBezierControlPoints = function getBezierControlPoints(_ref) {
       sourceNode = _ref.sourceNode,
       targetNode = _ref.targetNode,
       offset = _ref.offset;
+  var nodeDistance = Math.max(Math.abs(sourceNode.x - targetNode.x), Math.abs(sourceNode.y - targetNode.y));
+  offset = offset || nodeDistance / 4;
   var sBBox = getNodeBBox(sourceNode);
   var tBBox = getNodeBBox(targetNode);
   var sExpendBBox = getExpandedBBox(sBBox, offset);
   var tExpendBBox = getExpandedBBox(tBBox, offset);
   var sDirection = edge_pointDirection(start, sourceNode);
+  var tDirection = edge_pointDirection(end, targetNode); // 1. 避免两个节点连出的多个连线重合。
+  // 2. 避免开始节点和结束节点方向相同时成为一个穿过节点的直线。
+
   var sNext = edge_getExpandedBBoxPoint(sExpendBBox, start, sDirection);
-  var tDirection = edge_pointDirection(end, targetNode);
-  var ePre = edge_getExpandedBBoxPoint(tExpendBBox, end, tDirection);
+  var ePre = edge_getExpandedBBoxPoint(tExpendBBox, end, tDirection); // 如果两个节点水平或垂直并且连线在两个节点最近的锚点之间，则不产生偏移，保证连线看起来像是直线
+
+  var vector1 = getDirectionVector(sourceNode, start);
+  var vector2 = getDirectionVector(targetNode, end);
+  var vector3 = getDirectionVector(sourceNode, targetNode); // 当开始节点控制连线的方向和连线方向相同，并且结束节点控制连线相反的时候，则意味这两个节点直接相连。此时不需要对控制点进行偏移调整
+
+  if (isSameDirection(vector1, vector3) && isContraryDirection(vector2, vector3)) {
+    return {
+      sNext: sNext,
+      ePre: ePre
+    };
+  } // 当开始节点控制连线方向和连线方向相反的时候或者结束节点控制连线形同的时候，增大偏移量，实现更美观的效果。
+
+
+  if (isSameDirection(vector2, vector3) || isContraryDirection(vector1, vector3)) {
+    offset = offset * 2;
+  } // 计算起点的调整点是否需要偏移
+  // 如果起点的调整点方向和连线方向相反，则添加偏移量
+  // 如果终点的调整点方向与连线方向
+
+
+  var randomNumberX = Math.ceil((Math.random() + 0.5) * offset);
+  var randomNumberY = Math.ceil((Math.random() + 0.5) * offset); // 如果是调整点在节点水平方向，那么调整的点Y需要向着另一个节点的方向进行一定随机量的偏移。
+  // 如果是调整点在节点垂直方向，那么调整的点X需要向着另一个节点的方向进行一定随机量的偏移。
+
+  if (sDirection === SegmentDirection.HORIZONTAL) {
+    sNext.y += sourceNode.y >= targetNode.y ? randomNumberY : -randomNumberY;
+  }
+
+  if (sDirection === SegmentDirection.VERTICAL) {
+    sNext.x += sourceNode.x >= targetNode.x ? randomNumberX : -randomNumberX;
+  }
+
+  if (tDirection === SegmentDirection.HORIZONTAL) {
+    ePre.y += sourceNode.y > targetNode.y ? randomNumberY : -randomNumberY;
+  }
+
+  if (tDirection === SegmentDirection.VERTICAL) {
+    ePre.x += sourceNode.x > targetNode.x ? randomNumberX : -randomNumberX;
+  }
+
   return {
     sNext: sNext,
     ePre: ePre
@@ -25113,6 +25221,39 @@ var twoPointDistance = function twoPointDistance(source, target) {
   // };
   return Math.sqrt(Math.pow(source.x - target.x, 2) + Math.pow(source.y - target.y, 2));
 };
+/**
+ * 包装边生成函数
+ * @param graphModel graph model
+ * @param generator 用户自定义的边生成函数
+ */
+
+function createEdgeGenerator(graphModel, generator) {
+  if (typeof generator !== 'function') {
+    return function (sourceNode, targetNode, currentEdge) {
+      return Object.assign({
+        type: graphModel.edgeType
+      }, currentEdge);
+    };
+  }
+
+  return function (sourceNode, targetNode, currentEdge) {
+    var result = generator(sourceNode, targetNode, currentEdge); // 无结果使用默认类型
+
+    if (!result) return {
+      type: graphModel.edgeType
+    };
+
+    if (typeof result === 'string') {
+      return Object.assign({}, currentEdge, {
+        type: result
+      });
+    }
+
+    return Object.assign({
+      type: result
+    }, currentEdge);
+  };
+}
 // EXTERNAL MODULE: /Users/didi/niu-workspace/LogicFlow/node_modules/core-js/modules/es.promise.js
 var es_promise = __webpack_require__(200);
 
@@ -25386,6 +25527,10 @@ var drag_StepDrag = /*#__PURE__*/function () {
       DOC.removeEventListener('mousemove', _this.handleMouseMove, false);
       DOC.removeEventListener('mouseup', _this.handleMouseUp, false);
       _this.isDragging = false;
+
+      _this.onDragEnd({
+        event: null
+      });
     });
 
     this.onDragStart = onDragStart;
@@ -25526,6 +25671,8 @@ var GraphModel_GraphModel = /*#__PURE__*/function () {
 
     GraphModel_defineProperty(this, "idGenerator", void 0);
 
+    GraphModel_defineProperty(this, "edgeGenerator", void 0);
+
     GraphModel_defineProperty(this, "nodeMoveRules", []);
 
     GraphModel_defineProperty(this, "edgeType", void 0);
@@ -25610,6 +25757,7 @@ var GraphModel_GraphModel = /*#__PURE__*/function () {
         background = _options$background === void 0 ? {} : _options$background,
         grid = options.grid,
         idGenerator = options.idGenerator,
+        edgeGenerator = options.edgeGenerator,
         animation = options.animation;
     this.background = background;
 
@@ -25632,8 +25780,8 @@ var GraphModel_GraphModel = /*#__PURE__*/function () {
       options.height = container.getBoundingClientRect().height;
     }
 
-    if (!options.width || !options.height) {
-      console.warn('画布初始化确实宽高');
+    if ((!options.width || !options.height) && options.autoExpand) {
+      console.warn('画布初始化缺少宽高，可能会出现节点无法拖动的情况');
     }
 
     this.width = options.width;
@@ -25642,6 +25790,9 @@ var GraphModel_GraphModel = /*#__PURE__*/function () {
     this.partial = options.partial;
     this.overlapMode = options.overlapMode || 0;
     this.idGenerator = idGenerator;
+    this.edgeGenerator = createEdgeGenerator(this, edgeGenerator);
+    this.width = options.width || this.rootEl.getBoundingClientRect().width;
+    this.height = options.height || this.rootEl.getBoundingClientRect().height;
   }
 
   GraphModel_createClass(GraphModel, [{
@@ -25693,8 +25844,7 @@ var GraphModel_GraphModel = /*#__PURE__*/function () {
         return a.zIndex - b.zIndex;
       }); // 只显示可见区域的节点和边
 
-      var showElements = [];
-      var topElementIdx = -1; // todo: 缓存, 优化计算效率
+      var showElements = []; // todo: 缓存, 优化计算效率
 
       var visibleLt = [-VisibleMoreSpace, -VisibleMoreSpace];
       var visibleRb = [this.width + VisibleMoreSpace, this.height + VisibleMoreSpace];
@@ -25703,20 +25853,10 @@ var GraphModel_GraphModel = /*#__PURE__*/function () {
         var currentItem = elements[i]; // 如果节点不在可见区域，且不是全元素显示模式，则隐藏节点。
 
         if (currentItem.visible && (!this.partial || currentItem.isSelected || this.isElementInArea(currentItem, visibleLt, visibleRb, false, false))) {
-          if (currentItem.zIndex === ElementMaxZIndex) {
-            topElementIdx = showElements.length;
-          }
-
           showElements.push(currentItem);
         }
       }
 
-      if (topElementIdx !== -1) {
-        var lastElement = showElements[showElements.length - 1];
-        showElements[showElements.length - 1] = showElements[topElementIdx];
-        showElements[topElementIdx] = lastElement;
-      }
-
       return showElements;
     }
     /**
@@ -25760,6 +25900,7 @@ var GraphModel_GraphModel = /*#__PURE__*/function () {
      * @param rightBottomPoint 表示区域右下角的点
      * @param wholeEdge 是否要整个边都在区域内部
      * @param wholeNode 是否要整个节点都在区域内部
+     * @param ignoreHideElement 是否忽略隐藏的节点
      */
 
   }, {
@@ -25767,6 +25908,7 @@ var GraphModel_GraphModel = /*#__PURE__*/function () {
     value: function getAreaElement(leftTopPoint, rightBottomPoint) {
       var wholeEdge = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
       var wholeNode = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
+      var ignoreHideElement = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
       var areaElements = [];
       var elements = [];
       this.nodes.forEach(function (node) {
@@ -25779,7 +25921,7 @@ var GraphModel_GraphModel = /*#__PURE__*/function () {
       for (var i = 0; i < elements.length; i++) {
         var currentItem = elements[i];
 
-        if (this.isElementInArea(currentItem, leftTopPoint, rightBottomPoint, wholeEdge, wholeNode)) {
+        if ((!ignoreHideElement || currentItem.visible) && this.isElementInArea(currentItem, leftTopPoint, rightBottomPoint, wholeEdge, wholeNode)) {
           areaElements.push(currentItem);
         }
       }
@@ -25925,6 +26067,10 @@ var GraphModel_GraphModel = /*#__PURE__*/function () {
     value: function graphDataToModel(graphData) {
       var _this = this;
 
+      if (!this.width || !this.height) {
+        this.resize();
+      }
+
       this.nodes = lodash_es_map(graphData.nodes, function (node) {
         var Model = _this.getModel(node.type);
 
@@ -26179,7 +26325,8 @@ var GraphModel_GraphModel = /*#__PURE__*/function () {
 
       this.edges.forEach(function (edge) {
         if (edge.id === oldId) {
-          edge.id = newId;
+          // edge.id = newId;
+          edge.changeEdgeId(newId);
         }
       });
       return newId;
@@ -26307,9 +26454,10 @@ var GraphModel_GraphModel = /*#__PURE__*/function () {
 
       if (!Model) {
         throw new Error("\u627E\u4E0D\u5230".concat(nodeOriginData.type, "\u5BF9\u5E94\u7684\u8282\u70B9\uFF0C\u8BF7\u786E\u8BA4\u662F\u5426\u5DF2\u6CE8\u518C\u6B64\u7C7B\u578B\u8282\u70B9\u3002"));
-      } // TODO 元素的 model 不应该直接可以操作 graphModel 的属性，但可以调方法
-
+      }
 
+      nodeOriginData.x = snapToGrid(nodeOriginData.x, this.gridSize);
+      nodeOriginData.y = snapToGrid(nodeOriginData.y, this.gridSize);
       var nodeModel = new Model(nodeOriginData, this);
       nodeModel.init();
       this.nodes.push(nodeModel);
@@ -26364,9 +26512,15 @@ var GraphModel_GraphModel = /*#__PURE__*/function () {
       }
 
       var nodeModel = node.model;
-      var r = nodeModel.move(deltaX, deltaY, isIgnoreRule); // 2) 移动边
 
-      r && this.moveEdge(nodeId, deltaX, deltaY);
+      var _nodeModel$getMoveDis = nodeModel.getMoveDistance(deltaX, deltaY, isIgnoreRule);
+
+      var _nodeModel$getMoveDis2 = GraphModel_slicedToArray(_nodeModel$getMoveDis, 2);
+
+      deltaX = _nodeModel$getMoveDis2[0];
+      deltaY = _nodeModel$getMoveDis2[1];
+      // 2) 移动边
+      this.moveEdge(nodeId, deltaX, deltaY);
     }
     /**
      * 移动节点-绝对位置
@@ -26899,8 +27053,12 @@ var GraphModel_GraphModel = /*#__PURE__*/function () {
   }, {
     key: "resize",
     value: function resize(width, height) {
-      this.width = width !== null && width !== void 0 ? width : this.width;
-      this.height = height !== null && height !== void 0 ? height : this.height;
+      this.width = width || this.rootEl.getBoundingClientRect().width;
+      this.height = height || this.rootEl.getBoundingClientRect().height;
+
+      if (!this.width || !this.height) {
+        console.warn('渲染画布的时候无法获取画布宽高，请确认在container已挂载到DOM。@see https://github.com/didi/LogicFlow/issues/675');
+      }
     }
     /**
      * 清空画布
@@ -28961,7 +29119,7 @@ var BezierEdgeModel_BezierEdgeModel = /*#__PURE__*/function (_BaseEdgeModel) {
   BezierEdgeModel_createClass(BezierEdgeModel, [{
     key: "initEdgeData",
     value: function initEdgeData(data) {
-      this.offset = 100;
+      this.offset = 0;
 
       BezierEdgeModel_get(BezierEdgeModel_getPrototypeOf(BezierEdgeModel.prototype), "initEdgeData", this).call(this, data);
     }
@@ -29298,6 +29456,8 @@ var BaseNodeModel_BaseNodeModel = /*#__PURE__*/function () {
 
     BaseNodeModel_defineProperty(this, "isHitable", true);
 
+    BaseNodeModel_defineProperty(this, "isShowAnchor", false);
+
     BaseNodeModel_defineProperty(this, "draggable", true);
 
     BaseNodeModel_defineProperty(this, "visible", true);
@@ -29614,7 +29774,7 @@ var BaseNodeModel_BaseNodeModel = /*#__PURE__*/function () {
 
   }, {
     key: "getAnchorLineStyle",
-    value: function getAnchorLineStyle() {
+    value: function getAnchorLineStyle(anchorInfo) {
       var anchorLine = this.graphModel.theme.anchorLine;
       return lodash_es_cloneDeep(anchorLine);
     }
@@ -29866,13 +30026,61 @@ var BaseNodeModel_BaseNodeModel = /*#__PURE__*/function () {
 
       return isAllowMoveX || isAllowMoveY;
     }
+  }, {
+    key: "getMoveDistance",
+    value: function getMoveDistance(deltaX, deltaY) {
+      var isIgnoreRule = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+      var isAllowMoveX = false;
+      var isAllowMoveY = false;
+      var moveX = 0;
+      var moveY = 0;
+
+      if (isIgnoreRule) {
+        isAllowMoveX = true;
+        isAllowMoveY = true;
+      } else {
+        var r = this.isAllowMoveNode(deltaX, deltaY);
+
+        if (typeof r === 'boolean') {
+          isAllowMoveX = r;
+          isAllowMoveY = r;
+        } else {
+          isAllowMoveX = r.x;
+          isAllowMoveY = r.y;
+        }
+      }
+
+      if (isAllowMoveX && deltaX) {
+        var targetX = this.x + deltaX;
+        this.x = targetX;
+        this.text && this.moveText(deltaX, 0);
+        moveX = deltaX;
+      }
+
+      if (isAllowMoveY && deltaY) {
+        var targetY = this.y + deltaY;
+        this.y = targetY;
+        this.text && this.moveText(0, deltaY);
+        moveY = deltaY;
+      }
+
+      return [moveX, moveY];
+    }
   }, {
     key: "moveTo",
     value: function moveTo(x, y) {
       var isIgnoreRule = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
       var deltaX = x - this.x;
       var deltaY = y - this.y;
-      return this.move(deltaX, deltaY, isIgnoreRule);
+      if (!isIgnoreRule && !this.isAllowMoveNode(deltaX, deltaY)) return false;
+
+      if (this.text) {
+        this.text && this.moveText(deltaX, deltaY);
+      }
+
+      this.x = x;
+      this.y = y;
+      return true;
     }
   }, {
     key: "moveText",
@@ -29908,12 +30116,23 @@ var BaseNodeModel_BaseNodeModel = /*#__PURE__*/function () {
     value: function setSelected() {
       var flag = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
       this.isSelected = flag;
+
+      if (this.graphModel.overlapMode === OverlapMode.DEFAULT) {
+        this.zIndex = flag ? ElementMaxZIndex : 1;
+      }
     }
   }, {
     key: "setHovered",
     value: function setHovered() {
       var flag = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
       this.isHovered = flag;
+      this.setIsShowAnchor(flag);
+    }
+  }, {
+    key: "setIsShowAnchor",
+    value: function setIsShowAnchor() {
+      var flag = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+      this.isShowAnchor = flag;
     }
   }, {
     key: "setHitable",
@@ -29947,6 +30166,12 @@ var BaseNodeModel_BaseNodeModel = /*#__PURE__*/function () {
         data: properties
       });
     }
+  }, {
+    key: "deleteProperty",
+    value: function deleteProperty(key) {
+      delete this.properties[key];
+      this.setAttributes();
+    }
   }, {
     key: "setStyle",
     value: function setStyle(key, val) {
@@ -31263,6 +31488,39 @@ var SnaplineModel_SnaplineModel = /*#__PURE__*/function () {
 
 
 
+// CONCATENATED MODULE: ./src/util/raf.ts
+
+
+
+
+
+
+var rafIdMap = new Map();
+var raf_createRaf = function createRaf(callback) {
+  var rafId = uuid_createUuid();
+
+  function run() {
+    callback();
+    var eId = rafIdMap.get(rafId);
+
+    if (eId) {
+      var nId = window.requestAnimationFrame(run);
+      rafIdMap.set(rafId, nId);
+    }
+  }
+
+  var id = window.requestAnimationFrame(run);
+  rafIdMap.set(rafId, id);
+  return rafId;
+};
+var cancelRaf = function cancelRaf(rafId) {
+  var eId = rafIdMap.get(rafId);
+
+  if (eId) {
+    window.cancelAnimationFrame(eId);
+    rafIdMap.delete(rafId);
+  }
+};
 // CONCATENATED MODULE: ./src/view/Anchor.tsx
 function Anchor_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { Anchor_typeof = function _typeof(obj) { return typeof obj; }; } else { Anchor_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return Anchor_typeof(obj); }
 
@@ -31337,6 +31595,7 @@ function Anchor_defineProperty(obj, key, value) { if (key in obj) { Object.defin
 
 
 
+
 var Anchor_Anchor = /*#__PURE__*/function (_Component) {
   Anchor_inherits(Anchor, _Component);
 
@@ -31399,7 +31658,9 @@ var Anchor_Anchor = /*#__PURE__*/function (_Component) {
           eventCenter = graphModel.eventCenter,
           width = graphModel.width,
           height = graphModel.height,
-          editConfigModel = graphModel.editConfigModel;
+          _graphModel$editConfi = graphModel.editConfigModel,
+          autoExpand = _graphModel$editConfi.autoExpand,
+          stopMoveGraph = _graphModel$editConfi.stopMoveGraph;
       var clientX = event.clientX,
           clientY = event.clientY;
 
@@ -31415,7 +31676,7 @@ var Anchor_Anchor = /*#__PURE__*/function (_Component) {
           y1 = _graphModel$getPointB3.y;
 
       if (_this.t) {
-        clearInterval(_this.t);
+        cancelRaf(_this.t);
       }
 
       var nearBoundary = [];
@@ -31439,8 +31700,8 @@ var Anchor_Anchor = /*#__PURE__*/function (_Component) {
 
       _this.moveAnchorEnd(x1, y1);
 
-      if (nearBoundary.length > 0 && !editConfigModel.stopMoveGraph) {
-        _this.t = setInterval(function () {
+      if (nearBoundary.length > 0 && !stopMoveGraph && autoExpand) {
+        _this.t = raf_createRaf(function () {
           var _nearBoundary = nearBoundary,
               _nearBoundary2 = Anchor_slicedToArray(_nearBoundary, 2),
               translateX = _nearBoundary2[0],
@@ -31457,7 +31718,7 @@ var Anchor_Anchor = /*#__PURE__*/function (_Component) {
           });
 
           _this.moveAnchorEnd(endX - translateX, endY - translateY);
-        }, 50);
+        });
       }
 
       eventCenter.emit(EventType.ANCHOR_DRAG, {
@@ -31469,7 +31730,7 @@ var Anchor_Anchor = /*#__PURE__*/function (_Component) {
 
     Anchor_defineProperty(Anchor_assertThisInitialized(_this), "onDragEnd", function (event) {
       if (_this.t) {
-        clearInterval(_this.t);
+        cancelRaf(_this.t);
       }
 
       _this.checkEnd(event);
@@ -31486,16 +31747,26 @@ var Anchor_Anchor = /*#__PURE__*/function (_Component) {
       _this.sourceRuleResults.clear();
 
       _this.targetRuleResults.clear();
-    });
 
-    Anchor_defineProperty(Anchor_assertThisInitialized(_this), "checkEnd", function (event) {
       var _this$props3 = _this.props,
           graphModel = _this$props3.graphModel,
           nodeModel = _this$props3.nodeModel,
-          _this$props3$anchorDa = _this$props3.anchorData,
-          x = _this$props3$anchorDa.x,
-          y = _this$props3$anchorDa.y,
-          id = _this$props3$anchorDa.id; // nodeModel.setSelected(false);
+          anchorData = _this$props3.anchorData;
+      graphModel.eventCenter.emit(EventType.ANCHOR_DRAGEND, {
+        data: anchorData,
+        e: event,
+        nodeModel: nodeModel
+      });
+    });
+
+    Anchor_defineProperty(Anchor_assertThisInitialized(_this), "checkEnd", function (event) {
+      var _this$props4 = _this.props,
+          graphModel = _this$props4.graphModel,
+          nodeModel = _this$props4.nodeModel,
+          _this$props4$anchorDa = _this$props4.anchorData,
+          x = _this$props4$anchorDa.x,
+          y = _this$props4$anchorDa.y,
+          id = _this$props4$anchorDa.id; // nodeModel.setSelected(false);
 
       /* 创建边 */
 
@@ -31531,8 +31802,8 @@ var Anchor_Anchor = /*#__PURE__*/function (_Component) {
 
         if (isSourcePass && isTargetPass) {
           targetNode.setElementState(ElementState.DEFAULT);
-          var edgeModel = graphModel.addEdge({
-            type: edgeType,
+          var edgeData = graphModel.edgeGenerator(nodeModel.getData(), graphModel.getNodeModelById(info.node.id).getData());
+          var edgeModel = graphModel.addEdge(Anchor_objectSpread(Anchor_objectSpread({}, edgeData), {}, {
             sourceNodeId: nodeModel.id,
             sourceAnchorId: id,
             startPoint: {
@@ -31545,7 +31816,7 @@ var Anchor_Anchor = /*#__PURE__*/function (_Component) {
               x: info.anchor.x,
               y: info.anchor.y
             }
-          });
+          }));
           var anchorData = _this.props.anchorData;
           graphModel.eventCenter.emit(EventType.ANCHOR_DROP, {
             data: anchorData,
@@ -31583,10 +31854,10 @@ var Anchor_Anchor = /*#__PURE__*/function (_Component) {
   Anchor_createClass(Anchor, [{
     key: "getAnchorShape",
     value: function getAnchorShape() {
-      var _this$props4 = this.props,
-          anchorData = _this$props4.anchorData,
-          style = _this$props4.style,
-          node = _this$props4.node;
+      var _this$props5 = this.props,
+          anchorData = _this$props5.anchorData,
+          style = _this$props5.style,
+          node = _this$props5.node;
       var anchorShape = node.getAnchorShape(anchorData);
       if (anchorShape) return anchorShape;
       var x = anchorData.x,
@@ -31609,10 +31880,10 @@ var Anchor_Anchor = /*#__PURE__*/function (_Component) {
   }, {
     key: "moveAnchorEnd",
     value: function moveAnchorEnd(endX, endY) {
-      var _this$props5 = this.props,
-          graphModel = _this$props5.graphModel,
-          nodeModel = _this$props5.nodeModel,
-          anchorData = _this$props5.anchorData;
+      var _this$props6 = this.props,
+          graphModel = _this$props6.graphModel,
+          nodeModel = _this$props6.nodeModel,
+          anchorData = _this$props6.anchorData;
       var info = targetNodeInfo({
         x: endX,
         y: endY
@@ -31681,9 +31952,9 @@ var Anchor_Anchor = /*#__PURE__*/function (_Component) {
           startY = _this$state4.startY,
           endX = _this$state4.endX,
           endY = _this$state4.endY;
-      var _this$props6 = this.props,
-          edgeAddable = _this$props6.anchorData.edgeAddable,
-          edgeStyle = _this$props6.edgeStyle;
+      var _this$props7 = this.props,
+          edgeAddable = _this$props7.anchorData.edgeAddable,
+          edgeStyle = _this$props7.edgeStyle;
       return (// className="lf-anchor" 作为下载时，需要将锚点删除的依据，不要修改类名
         preact_module_v("g", {
           className: "lf-anchor"
@@ -32075,39 +32346,6 @@ var BaseText_BaseText = /*#__PURE__*/function (_Component) {
 
 
 var isIe = window.navigator.userAgent.match(/MSIE|Trident/) !== null;
-// CONCATENATED MODULE: ./src/util/raf.ts
-
-
-
-
-
-
-var rafIdMap = new Map();
-var raf_createRaf = function createRaf(callback) {
-  var rafId = uuid_createUuid();
-
-  function run() {
-    callback();
-    var eId = rafIdMap.get(rafId);
-
-    if (eId) {
-      var nId = window.requestAnimationFrame(run);
-      rafIdMap.set(rafId, nId);
-    }
-  }
-
-  var id = window.requestAnimationFrame(run);
-  rafIdMap.set(rafId, id);
-  return rafId;
-};
-var cancelRaf = function cancelRaf(rafId) {
-  var eId = rafIdMap.get(rafId);
-
-  if (eId) {
-    window.cancelAnimationFrame(eId);
-    rafIdMap.delete(rafId);
-  }
-};
 // CONCATENATED MODULE: ./src/view/node/BaseNode.tsx
 function BaseNode_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { BaseNode_typeof = function _typeof(obj) { return typeof obj; }; } else { BaseNode_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return BaseNode_typeof(obj); }
 
@@ -32223,7 +32461,9 @@ var BaseNode_BaseNode = /*#__PURE__*/function (_Component) {
           model = _this$props2.model,
           graphModel = _this$props2.graphModel; // const { isDragging } = model;
 
-      var editConfigModel = graphModel.editConfigModel,
+      var _graphModel$editConfi = graphModel.editConfigModel,
+          stopMoveGraph = _graphModel$editConfi.stopMoveGraph,
+          autoExpand = _graphModel$editConfi.autoExpand,
           transformModel = graphModel.transformModel,
           width = graphModel.width,
           height = graphModel.height,
@@ -32245,7 +32485,7 @@ var BaseNode_BaseNode = /*#__PURE__*/function (_Component) {
           x1 = _transformModel$Canva2[0],
           y1 = _transformModel$Canva2[1];
 
-      if (x1 < 0 || y1 < 0 || x1 > width || y1 > height) {
+      if (autoExpand && !stopMoveGraph && (x1 < 0 || y1 < 0 || x1 > width || y1 > height)) {
         // 鼠标超出画布后的拖动，不处理，而是让上一次setInterval持续滚动画布
         return;
       } // 1. 考虑画布被缩放
@@ -32256,7 +32496,20 @@ var BaseNode_BaseNode = /*#__PURE__*/function (_Component) {
       y = y + _this.moveOffset.y; // 将x, y移动到grid上
 
       x = snapToGrid(x, gridSize);
-      y = snapToGrid(y, gridSize); // 取节点左上角和右下角，计算节点移动是否超出范围
+      y = snapToGrid(y, gridSize);
+
+      if (!width || !height) {
+        graphModel.moveNode2Coordinate(model.id, x, y);
+        return;
+      }
+
+      var isOutCanvas = x1 < 0 || y1 < 0 || x1 > width || y1 > height;
+
+      if (autoExpand && !stopMoveGraph && isOutCanvas) {
+        // 鼠标超出画布后的拖动，不处理，而是让上一次setInterval持续滚动画布
+        return;
+      } // 取节点左上角和右下角，计算节点移动是否超出范围
+
 
       var _transformModel$Canva3 = transformModel.CanvasPointToHtmlPoint([x - model.width / 2, y - model.height / 2]),
           _transformModel$Canva4 = BaseNode_slicedToArray(_transformModel$Canva3, 2),
@@ -32285,7 +32538,7 @@ var BaseNode_BaseNode = /*#__PURE__*/function (_Component) {
         cancelRaf(_this.t);
       }
 
-      if (nearBoundary.length > 0 && !editConfigModel.stopMoveGraph && editConfigModel.autoExpand) {
+      if (nearBoundary.length > 0 && !stopMoveGraph && autoExpand) {
         _this.t = raf_createRaf(function () {
           var _nearBoundary = nearBoundary,
               _nearBoundary2 = BaseNode_slicedToArray(_nearBoundary, 2),
@@ -32316,7 +32569,7 @@ var BaseNode_BaseNode = /*#__PURE__*/function (_Component) {
 
       var time = new Date().getTime() - _this.startTime;
 
-      if (time > 200) return; // 事件大于200ms，认为是拖拽。
+      if (time > 200) return; // 事件大于200ms，认为是拖拽, 不触发click事件。
 
       var _this$props3 = _this.props,
           model = _this$props3.model,
@@ -32382,9 +32635,6 @@ var BaseNode_BaseNode = /*#__PURE__*/function (_Component) {
       var _this$props5 = _this.props,
           model = _this$props5.model,
           graphModel = _this$props5.graphModel;
-
-      _this.toFront();
-
       _this.startTime = new Date().getTime();
       var editConfigModel = graphModel.editConfigModel;
 
@@ -32394,16 +32644,10 @@ var BaseNode_BaseNode = /*#__PURE__*/function (_Component) {
     });
 
     BaseNode_defineProperty(BaseNode_assertThisInitialized(_this), "setHoverON", function (ev) {
-      var isHovered = _this.state.isHovered;
-      if (isHovered) return;
-
-      _this.setState({
-        isHovered: true
-      });
-
       var _this$props6 = _this.props,
           model = _this$props6.model,
           graphModel = _this$props6.graphModel;
+      if (model.isHovered) return;
       var nodeData = model.getData();
       model.setHovered(true);
       graphModel.eventCenter.emit(EventType.NODE_MOUSEENTER, {
@@ -32413,14 +32657,11 @@ var BaseNode_BaseNode = /*#__PURE__*/function (_Component) {
     });
 
     BaseNode_defineProperty(BaseNode_assertThisInitialized(_this), "setHoverOFF", function (ev) {
-      _this.setState({
-        isHovered: false
-      });
-
       var _this$props7 = _this.props,
           model = _this$props7.model,
           graphModel = _this$props7.graphModel;
       var nodeData = model.getData();
+      if (!model.isHovered) return;
       model.setHovered(false);
       graphModel.eventCenter.emit(EventType.NODE_MOUSELEAVE, {
         data: nodeData,
@@ -32449,9 +32690,6 @@ var BaseNode_BaseNode = /*#__PURE__*/function (_Component) {
       eventCenter: eventCenter,
       model: _model
     });
-    _this.state = {
-      isHovered: false
-    };
     return _this;
   }
 
@@ -32470,12 +32708,12 @@ var BaseNode_BaseNode = /*#__PURE__*/function (_Component) {
           graphModel = _this$props8.graphModel;
       var isSelected = model.isSelected,
           isHitable = model.isHitable,
-          isDragging = model.isDragging;
-      var isHovered = this.state.isHovered;
+          isDragging = model.isDragging,
+          isShowAnchor = model.isShowAnchor;
 
-      if (isHitable && (isSelected || isHovered) && !isDragging) {
-        var edgeStyle = model.getAnchorLineStyle();
+      if (isHitable && (isSelected || isShowAnchor) && !isDragging) {
         return lodash_es_map(model.anchors, function (anchor, index) {
+          var edgeStyle = model.getAnchorLineStyle(anchor);
           var style = model.getAnchorStyle(anchor);
           return preact_module_v(view_Anchor, {
             anchorData: anchor,
@@ -32574,9 +32812,9 @@ var BaseNode_BaseNode = /*#__PURE__*/function (_Component) {
       var _this$props11 = this.props,
           model = _this$props11.model,
           graphModel = _this$props11.graphModel;
-      var _graphModel$editConfi = graphModel.editConfigModel,
-          hideAnchors = _graphModel$editConfi.hideAnchors,
-          adjustNodePosition = _graphModel$editConfi.adjustNodePosition,
+      var _graphModel$editConfi2 = graphModel.editConfigModel,
+          hideAnchors = _graphModel$editConfi2.hideAnchors,
+          adjustNodePosition = _graphModel$editConfi2.adjustNodePosition,
           gridSize = graphModel.gridSize,
           SCALE_X = graphModel.transformModel.SCALE_X;
       var isHitable = model.isHitable,
@@ -32598,7 +32836,7 @@ var BaseNode_BaseNode = /*#__PURE__*/function (_Component) {
         nodeShape = preact_module_v("g", {
           className: this.getStateClassName(),
           onMouseDown: this.handleMouseDown,
-          onMouseUp: this.handleClick,
+          onClick: this.handleClick,
           onMouseEnter: this.setHoverON,
           onMouseOver: this.setHoverON,
           onMouseLeave: this.setHoverOFF,
@@ -33345,6 +33583,7 @@ var HtmlNode_HtmlNode = /*#__PURE__*/function (_BaseNode) {
           width = model.width;
       this.currentProperties = JSON.stringify(model.properties);
       var style = model.getNodeStyle();
+      this.currentProperties = JSON.stringify(model.properties);
       return preact_module_v("foreignObject", HtmlNode_extends({}, style, {
         x: x - width / 2,
         y: y - height / 2,
@@ -33830,7 +34069,8 @@ var AdjustPoint_AdjustPoint = /*#__PURE__*/function (_Component) {
 
 
         if (type === AdjustType.SOURCE) {
-          createEdgeInfo = AdjustPoint_objectSpread(AdjustPoint_objectSpread({}, createEdgeInfo), {}, {
+          var edgeInfo = graphModel.edgeGenerator(graphModel.getNodeModelById(info.node.id).getData(), graphModel.getNodeModelById(edgeModel.targetNodeId).getData(), createEdgeInfo);
+          createEdgeInfo = AdjustPoint_objectSpread(AdjustPoint_objectSpread({}, edgeInfo), {}, {
             sourceNodeId: info.node.id,
             sourceAnchorId: info.anchor.id,
             startPoint: {
@@ -33841,7 +34081,9 @@ var AdjustPoint_AdjustPoint = /*#__PURE__*/function (_Component) {
             endPoint: AdjustPoint_objectSpread({}, edgeModel.endPoint)
           });
         } else if (type === AdjustType.TARGET) {
-          createEdgeInfo = AdjustPoint_objectSpread(AdjustPoint_objectSpread({}, createEdgeInfo), {}, {
+          var _edgeInfo = graphModel.edgeGenerator(graphModel.getNodeModelById(edgeModel.sourceNodeId).getData(), graphModel.getNodeModelById(info.node.id).getData(), createEdgeInfo);
+
+          createEdgeInfo = AdjustPoint_objectSpread(AdjustPoint_objectSpread({}, _edgeInfo), {}, {
             sourceNodeId: edgeModel.sourceNodeId,
             startPoint: AdjustPoint_objectSpread({}, edgeModel.startPoint),
             targetNodeId: info.node.id,
@@ -34216,7 +34458,7 @@ var BaseEdge_BaseEdge = /*#__PURE__*/function (_Component) {
       _this.toFront();
     });
 
-    BaseEdge_defineProperty(BaseEdge_assertThisInitialized(_this), "getIsDraging", function () {
+    BaseEdge_defineProperty(BaseEdge_assertThisInitialized(_this), "getIsDragging", function () {
       return false;
     });
 
@@ -34226,6 +34468,13 @@ var BaseEdge_BaseEdge = /*#__PURE__*/function (_Component) {
   BaseEdge_createClass(BaseEdge, [{
     key: "getShape",
     value: function getShape() {}
+    /**
+     * 支持重写此方法来实现在连线上定义额外内容。
+     */
+
+  }, {
+    key: "getExtraShape",
+    value: function getExtraShape() {}
   }, {
     key: "getTextStyle",
     value: function getTextStyle() {}
@@ -34288,72 +34537,70 @@ var BaseEdge_BaseEdge = /*#__PURE__*/function (_Component) {
   }, {
     key: "getArrow",
     value: function getArrow() {
-      return preact_module_v("g", null, preact_module_v("defs", null, this.getStartArrow(), this.getEndArrow()));
-    }
-  }, {
-    key: "getStartArrow",
-    value: function getStartArrow() {
-      var _this$props6 = this.props,
-          model = _this$props6.model,
-          graphModel = _this$props6.graphModel;
-      var id = model.id;
-      var arrow = graphModel.theme.arrow;
-      var offset = arrow.offset,
-          verticalLength = arrow.verticalLength;
+      var id = this.props.model.id;
 
       var _this$getArrowStyle = this.getArrowStyle(),
-          stroke = _this$getArrowStyle.stroke,
-          strokeWidth = _this$getArrowStyle.strokeWidth;
+          _this$getArrowStyle$r = _this$getArrowStyle.refY,
+          refY = _this$getArrowStyle$r === void 0 ? 0 : _this$getArrowStyle$r,
+          _this$getArrowStyle$r2 = _this$getArrowStyle.refX,
+          refX = _this$getArrowStyle$r2 === void 0 ? 2 : _this$getArrowStyle$r2;
 
-      return preact_module_v("marker", {
+      return preact_module_v("g", null, preact_module_v("defs", null, preact_module_v("marker", {
         id: "marker-start-".concat(id),
-        refX: "-1",
+        refX: refX,
+        refY: refY,
         overflow: "visible",
         orient: "auto",
         markerUnits: "userSpaceOnUse"
-      }, preact_module_v("path", {
+      }, this.getStartArrow()), preact_module_v("marker", {
+        id: "marker-end-".concat(id),
+        refX: refX,
+        refY: refY,
+        overflow: "visible",
+        orient: "auto",
+        markerUnits: "userSpaceOnUse"
+      }, this.getEndArrow())));
+    }
+  }, {
+    key: "getStartArrow",
+    value: function getStartArrow() {
+      var _this$getArrowStyle2 = this.getArrowStyle(),
+          stroke = _this$getArrowStyle2.stroke,
+          strokeWidth = _this$getArrowStyle2.strokeWidth,
+          offset = _this$getArrowStyle2.offset,
+          verticalLength = _this$getArrowStyle2.verticalLength;
+
+      return preact_module_v("path", {
         stroke: stroke,
         fill: stroke,
         strokeWidth: strokeWidth,
         d: "M 0 0 L ".concat(offset, " -").concat(verticalLength, " L ").concat(offset, " ").concat(verticalLength, " Z")
-      }));
+      });
     }
   }, {
     key: "getEndArrow",
     value: function getEndArrow() {
-      var _this$props7 = this.props,
-          model = _this$props7.model,
-          graphModel = _this$props7.graphModel;
-      var id = model.id;
-      var arrow = graphModel.theme.arrow;
-      var offset = arrow.offset,
-          verticalLength = arrow.verticalLength;
-
-      var _this$getArrowStyle2 = this.getArrowStyle(),
-          stroke = _this$getArrowStyle2.stroke,
-          strokeWidth = _this$getArrowStyle2.strokeWidth;
+      var _this$getArrowStyle3 = this.getArrowStyle(),
+          stroke = _this$getArrowStyle3.stroke,
+          strokeWidth = _this$getArrowStyle3.strokeWidth,
+          offset = _this$getArrowStyle3.offset,
+          verticalLength = _this$getArrowStyle3.verticalLength;
 
-      return preact_module_v("marker", {
-        id: "marker-end-".concat(id),
-        refX: "-1",
-        overflow: "visible",
-        orient: "auto",
-        markerUnits: "userSpaceOnUse"
-      }, preact_module_v("path", {
+      return preact_module_v("path", {
         stroke: stroke,
         fill: stroke,
         strokeWidth: strokeWidth,
         transform: "rotate(180)",
         d: "M 0 0 L ".concat(offset, " -").concat(verticalLength, " L ").concat(offset, " ").concat(verticalLength, " Z")
-      }));
+      });
     } // 起点终点，可以修改起点/终点为其他节点
 
   }, {
     key: "getAdjustPoints",
     value: function getAdjustPoints() {
-      var _this$props8 = this.props,
-          model = _this$props8.model,
-          graphModel = _this$props8.graphModel;
+      var _this$props6 = this.props,
+          model = _this$props6.model,
+          graphModel = _this$props6.graphModel;
       var start = model.getAdjustStart();
       var end = model.getAdjustEnd();
       return preact_module_v("g", null, preact_module_v(AdjustPoint_AdjustPoint, BaseEdge_extends({
@@ -34386,9 +34633,9 @@ var BaseEdge_BaseEdge = /*#__PURE__*/function (_Component) {
   }, {
     key: "toFront",
     value: function toFront() {
-      var _this$props9 = this.props,
-          graphModel = _this$props9.graphModel,
-          model = _this$props9.model;
+      var _this$props7 = this.props,
+          graphModel = _this$props7.graphModel,
+          model = _this$props7.model;
       var overlapMode = graphModel.overlapMode;
 
       if (overlapMode !== OverlapMode.INCREASE) {
@@ -34398,12 +34645,12 @@ var BaseEdge_BaseEdge = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props10 = this.props,
-          _this$props10$model = _this$props10.model,
-          isSelected = _this$props10$model.isSelected,
-          isHitable = _this$props10$model.isHitable,
-          graphModel = _this$props10.graphModel;
-      var isDragging = this.getIsDraging();
+      var _this$props8 = this.props,
+          _this$props8$model = _this$props8.model,
+          isSelected = _this$props8$model.isSelected,
+          isHitable = _this$props8$model.isHitable,
+          graphModel = _this$props8.graphModel;
+      var isDragging = this.getIsDragging();
       var adjustEdgeStartAndEnd = graphModel.editConfigModel.adjustEdgeStartAndEnd,
           animation = graphModel.animation; // performance 只允许出现一条edge有动画
 
@@ -34837,7 +35084,7 @@ var PolylineEdge_PolylineEdge = /*#__PURE__*/function (_BaseEdge) {
       _this.appendInfo = appendInfo;
     });
 
-    PolylineEdge_defineProperty(PolylineEdge_assertThisInitialized(_this), "getIsDraging", function () {
+    PolylineEdge_defineProperty(PolylineEdge_assertThisInitialized(_this), "getIsDragging", function () {
       return _this.isDragging;
     });
 
@@ -35472,7 +35719,11 @@ var History_History = /*#__PURE__*/function () {
 
     this.eventCenter = graphModel.eventCenter;
     var NODE_ADD = EventType.NODE_ADD,
+        NODE_DELETE = EventType.NODE_DELETE,
+        NODE_DND_ADD = EventType.NODE_DND_ADD,
         EDGE_ADD = EventType.EDGE_ADD,
+        EDGE_DELETE = EventType.EDGE_DELETE,
+        TEXT_UPDATE = EventType.TEXT_UPDATE,
         NODE_DROP = EventType.NODE_DROP,
         EDGE_ADJUST = EventType.EDGE_ADJUST,
         SELECTION_DROP = EventType.SELECTION_DROP,
@@ -35483,7 +35734,7 @@ var History_History = /*#__PURE__*/function () {
         NODE_PROPERTY_UPDATE = EventType.NODE_PROPERTY_UPDATE,
         EDGE_PROPERTY_UPDATE = EventType.EDGE_PROPERTY_UPDATE,
         HISTORY_INSERT = EventType.HISTORY_INSERT;
-    var historyChangeKeys = "\n      ".concat(NODE_ADD, ",\n      ").concat(EDGE_ADD, ",\n      ").concat(NODE_DROP, ",\n      ").concat(EDGE_ADJUST, ",\n      ").concat(SELECTION_DROP, ",\n      ").concat(TEXT_DROP, ",\n      ").concat(NODE_TEXT_UPDATE, ",\n      ").concat(EDGE_TEXT_UPDATE, ",\n      ").concat(GRAPH_RENDERED, "\n    ");
+    var historyChangeKeys = "\n      ".concat(NODE_ADD, ",\n      ").concat(EDGE_ADD, ",\n      ").concat(NODE_DELETE, ",\n      ").concat(NODE_DND_ADD, ",\n      ").concat(EDGE_DELETE, ",\n      ").concat(TEXT_UPDATE, ",\n      ").concat(NODE_DROP, ",\n      ").concat(EDGE_ADJUST, ",\n      ").concat(SELECTION_DROP, ",\n      ").concat(TEXT_DROP, ",\n      ").concat(NODE_TEXT_UPDATE, ",\n      ").concat(EDGE_TEXT_UPDATE, ",\n      ").concat(GRAPH_RENDERED, "\n    ");
 
     if (isPropertiesChangeHistory) {
       historyChangeKeys += ",".concat(NODE_PROPERTY_UPDATE, ",").concat(EDGE_PROPERTY_UPDATE);
@@ -35657,7 +35908,7 @@ var TextEditTool_TextEdit = stateUtil_observer(TextEditTool_class = (_temp = _cl
     });
 
     TextEditTool_defineProperty(TextEditTool_assertThisInitialized(_this), "keyupHandler", function (ev) {
-      var textEditElement = _this.props.graphModel.textEditElement;
+      var textEditElement = _this.props.graphModel.textEditElement; // 按下alt+enter表示输入完成
 
       if (ev.key === 'Enter' && ev.altKey) {
         textEditElement.setElementState(0);
@@ -35760,6 +36011,7 @@ var TextEditTool_TextEdit = stateUtil_observer(TextEditTool_class = (_temp = _cl
         key: textEditElement.id,
         onKeyUp: this.keyupHandler,
         onKeyDown: this.keydownHandler,
+        onKeyPress: this.keydownHandler,
         onInput: this.inputHandler
       }, (_textEditElement$text = textEditElement.text) === null || _textEditElement$text === void 0 ? void 0 : _textEditElement$text.value) : null;
     }
@@ -35846,11 +36098,12 @@ var TextEditTool_TextEdit = stateUtil_observer(TextEditTool_class = (_temp = _cl
             left = _transformModel$Canva2[0],
             top = _transformModel$Canva2[1];
 
+        var textStyle = textEditElement.getTextStyle();
         return {
-          style: TextEditTool_objectSpread({
+          style: TextEditTool_objectSpread(TextEditTool_objectSpread({
             left: left,
             top: top
-          }, autoStyle)
+          }, autoStyle), textStyle)
         };
       }
     }
@@ -36534,10 +36787,6 @@ var LogicFlow_LogicFlow = /*#__PURE__*/function () {
 
     LogicFlow_defineProperty(this, "container", void 0);
 
-    LogicFlow_defineProperty(this, "width", void 0);
-
-    LogicFlow_defineProperty(this, "height", void 0);
-
     LogicFlow_defineProperty(this, "graphModel", void 0);
 
     LogicFlow_defineProperty(this, "history", void 0);
@@ -36855,14 +37104,15 @@ var LogicFlow_LogicFlow = /*#__PURE__*/function () {
     }
     /**
      * 重新设置画布的宽高
+     * 不传会自动计算画布宽高
      */
 
   }, {
     key: "resize",
     value: function resize(width, height) {
-      this.options.width = width !== null && width !== void 0 ? width : this.options.width;
-      this.options.height = height !== null && height !== void 0 ? height : this.options.height;
       this.graphModel.resize(width, height);
+      this.options.width = this.graphModel.width;
+      this.options.height = this.graphModel.height;
     }
     /**
      * 设置默认的边类型。
@@ -37256,6 +37506,13 @@ var LogicFlow_LogicFlow = /*#__PURE__*/function () {
 
       (_this$graphModel$getE = this.graphModel.getElement(id)) === null || _this$graphModel$getE === void 0 ? void 0 : _this$graphModel$getE.setProperties(compatible_formatData(properties));
     }
+  }, {
+    key: "deleteProperty",
+    value: function deleteProperty(id, key) {
+      var _this$graphModel$getE2;
+
+      (_this$graphModel$getE2 = this.graphModel.getElement(id)) === null || _this$graphModel$getE2 === void 0 ? void 0 : _this$graphModel$getE2.deleteProperty(key);
+    }
     /**
      * 获取元素的自定义属性
      * @param id 元素的id
@@ -37265,9 +37522,9 @@ var LogicFlow_LogicFlow = /*#__PURE__*/function () {
   }, {
     key: "getProperties",
     value: function getProperties(id) {
-      var _this$graphModel$getE2;
+      var _this$graphModel$getE3;
 
-      return (_this$graphModel$getE2 = this.graphModel.getElement(id)) === null || _this$graphModel$getE2 === void 0 ? void 0 : _this$graphModel$getE2.getProperties();
+      return (_this$graphModel$getE3 = this.graphModel.getElement(id)) === null || _this$graphModel$getE3 === void 0 ? void 0 : _this$graphModel$getE3.getProperties();
     }
     /**
      * 将某个元素放置到顶部。
@@ -37346,7 +37603,8 @@ var LogicFlow_LogicFlow = /*#__PURE__*/function () {
     value: function getAreaElement(leftTopPoint, rightBottomPoint) {
       var wholeEdge = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
       var wholeNode = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
-      return this.graphModel.getAreaElement(leftTopPoint, rightBottomPoint, wholeEdge, wholeNode).map(function (element) {
+      var ignoreHideElement = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+      return this.graphModel.getAreaElement(leftTopPoint, rightBottomPoint, wholeEdge, wholeNode, ignoreHideElement).map(function (element) {
         return element.getData();
       });
     }