@logicflow/core 1.2.0-next.4 → 1.2.0

package/dist/logic-flow.js

@@ -5775,36 +5775,6 @@ $({ target: 'Array', proto: true, forced: !HAS_SPECIES_SUPPORT }, {
 /* 23 */
 /***/ (function(module, exports, __webpack_require__) {
 
-var $ = __webpack_require__(16);
-var DESCRIPTORS = __webpack_require__(36);
-var ownKeys = __webpack_require__(135);
-var toIndexedObject = __webpack_require__(39);
-var getOwnPropertyDescriptorModule = __webpack_require__(51);
-var createProperty = __webpack_require__(61);
-
-// `Object.getOwnPropertyDescriptors` method
-// https://tc39.es/ecma262/#sec-object.getownpropertydescriptors
-$({ target: 'Object', stat: true, sham: !DESCRIPTORS }, {
-  getOwnPropertyDescriptors: function getOwnPropertyDescriptors(object) {
-    var O = toIndexedObject(object);
-    var getOwnPropertyDescriptor = getOwnPropertyDescriptorModule.f;
-    var keys = ownKeys(O);
-    var result = {};
-    var index = 0;
-    var key, descriptor;
-    while (keys.length > index) {
-      descriptor = getOwnPropertyDescriptor(O, key = keys[index++]);
-      if (descriptor !== undefined) createProperty(result, key, descriptor);
-    }
-    return result;
-  }
-});
-
-
-/***/ }),
-/* 24 */
-/***/ (function(module, exports, __webpack_require__) {
-
 var DESCRIPTORS = __webpack_require__(36);
 var FUNCTION_NAME_EXISTS = __webpack_require__(94).EXISTS;
 var uncurryThis = __webpack_require__(15);
@@ -5832,6 +5802,36 @@ if (DESCRIPTORS && !FUNCTION_NAME_EXISTS) {
 }
 
 
+/***/ }),
+/* 24 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var $ = __webpack_require__(16);
+var DESCRIPTORS = __webpack_require__(36);
+var ownKeys = __webpack_require__(135);
+var toIndexedObject = __webpack_require__(39);
+var getOwnPropertyDescriptorModule = __webpack_require__(51);
+var createProperty = __webpack_require__(61);
+
+// `Object.getOwnPropertyDescriptors` method
+// https://tc39.es/ecma262/#sec-object.getownpropertydescriptors
+$({ target: 'Object', stat: true, sham: !DESCRIPTORS }, {
+  getOwnPropertyDescriptors: function getOwnPropertyDescriptors(object) {
+    var O = toIndexedObject(object);
+    var getOwnPropertyDescriptor = getOwnPropertyDescriptorModule.f;
+    var keys = ownKeys(O);
+    var result = {};
+    var index = 0;
+    var key, descriptor;
+    while (keys.length > index) {
+      descriptor = getOwnPropertyDescriptor(O, key = keys[index++]);
+      if (descriptor !== undefined) createProperty(result, key, descriptor);
+    }
+    return result;
+  }
+});
+
+
 /***/ }),
 /* 25 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -16345,7 +16345,7 @@ var web_dom_collections_for_each = __webpack_require__(11);
 var es_array_map = __webpack_require__(41);
 
 // EXTERNAL MODULE: /Users/didi/niu-workspace/LogicFlow/node_modules/core-js/modules/es.function.name.js
-var es_function_name = __webpack_require__(24);
+var es_function_name = __webpack_require__(23);
 
 // EXTERNAL MODULE: /Users/didi/niu-workspace/LogicFlow/node_modules/core-js/modules/es.object.keys.js
 var es_object_keys = __webpack_require__(20);
@@ -16360,7 +16360,7 @@ var es_array_filter = __webpack_require__(22);
 var es_object_get_own_property_descriptor = __webpack_require__(21);
 
 // EXTERNAL MODULE: /Users/didi/niu-workspace/LogicFlow/node_modules/core-js/modules/es.object.get-own-property-descriptors.js
-var es_object_get_own_property_descriptors = __webpack_require__(23);
+var es_object_get_own_property_descriptors = __webpack_require__(24);
 
 // EXTERNAL MODULE: /Users/didi/niu-workspace/LogicFlow/node_modules/core-js/modules/es.symbol.description.js
 var es_symbol_description = __webpack_require__(8);
@@ -23385,22 +23385,6 @@ var formateAnchorConnectValidateData = function formateAnchorConnectValidateData
 
   return data;
 };
-// CONCATENATED MODULE: ./src/constant/DefaultAnimation.ts
-// 不填或者false返回的配置，表示不开启所有动画
-var defaultAnimationCloseConfig = {
-  node: false,
-  edge: false
-}; // 仅使用true的时候返回的配置，表示开启所有动画
-
-var defaultAnimationOpenConfig = {
-  node: true,
-  edge: true
-};
-var defaultAnimationData = {
-  stroke: 'red',
-  strokeDasharray: '10 200',
-  className: 'lf-edge-animation'
-};
 // CONCATENATED MODULE: ./src/util/compatible.ts
 // 需要进行兼容操作，提供的方法
 // vue中data会进行Observe, 深拷贝的原始数据对象。
@@ -23427,7 +23411,7 @@ var getMinIndex = function getMinIndex() {
 
 
 
-var BaseEdgeModel_class, BaseEdgeModel_descriptor, BaseEdgeModel_descriptor2, BaseEdgeModel_descriptor3, BaseEdgeModel_descriptor4, BaseEdgeModel_descriptor5, BaseEdgeModel_descriptor6, BaseEdgeModel_descriptor7, BaseEdgeModel_descriptor8, BaseEdgeModel_descriptor9, BaseEdgeModel_descriptor10, BaseEdgeModel_descriptor11, BaseEdgeModel_descriptor12, BaseEdgeModel_descriptor13, BaseEdgeModel_descriptor14, BaseEdgeModel_descriptor15, BaseEdgeModel_descriptor16, BaseEdgeModel_descriptor17, _descriptor18, _descriptor19;
+var BaseEdgeModel_class, BaseEdgeModel_descriptor, BaseEdgeModel_descriptor2, BaseEdgeModel_descriptor3, BaseEdgeModel_descriptor4, BaseEdgeModel_descriptor5, BaseEdgeModel_descriptor6, BaseEdgeModel_descriptor7, BaseEdgeModel_descriptor8, BaseEdgeModel_descriptor9, BaseEdgeModel_descriptor10, BaseEdgeModel_descriptor11, BaseEdgeModel_descriptor12, BaseEdgeModel_descriptor13, BaseEdgeModel_descriptor14, BaseEdgeModel_descriptor15, BaseEdgeModel_descriptor16, BaseEdgeModel_descriptor17, _descriptor18, _descriptor19, _descriptor20;
 
 
 
@@ -23460,13 +23444,12 @@ function BaseEdgeModel_initializerWarningHelper(descriptor, context) { throw new
 
 
 
-
 var BaseEdgeModel_BaseEdgeModel = (BaseEdgeModel_class = /*#__PURE__*/function () {
   // 支持自定义
   function BaseEdgeModel(data, graphModel) {
     BaseEdgeModel_classCallCheck(this, BaseEdgeModel);
 
-    BaseEdgeModel_defineProperty(this, "id", uuid_createUuid());
+    BaseEdgeModel_defineProperty(this, "id", '');
 
     BaseEdgeModel_initializerDefineProperty(this, "type", BaseEdgeModel_descriptor, this);
 
@@ -23500,15 +23483,17 @@ var BaseEdgeModel_BaseEdgeModel = (BaseEdgeModel_class = /*#__PURE__*/function (
 
     BaseEdgeModel_initializerDefineProperty(this, "isAnimation", BaseEdgeModel_descriptor15, this);
 
+    BaseEdgeModel_initializerDefineProperty(this, "isShowAdjustPoint", BaseEdgeModel_descriptor16, this);
+
     BaseEdgeModel_defineProperty(this, "graphModel", void 0);
 
-    BaseEdgeModel_initializerDefineProperty(this, "zIndex", BaseEdgeModel_descriptor16, this);
+    BaseEdgeModel_initializerDefineProperty(this, "zIndex", BaseEdgeModel_descriptor17, this);
 
     BaseEdgeModel_defineProperty(this, "BaseType", ElementType.EDGE);
 
     BaseEdgeModel_defineProperty(this, "modelType", ModelType.EDGE);
 
-    BaseEdgeModel_initializerDefineProperty(this, "state", BaseEdgeModel_descriptor17, this);
+    BaseEdgeModel_initializerDefineProperty(this, "state", _descriptor18, this);
 
     BaseEdgeModel_defineProperty(this, "additionStateData", void 0);
 
@@ -23520,22 +23505,20 @@ var BaseEdgeModel_BaseEdgeModel = (BaseEdgeModel_class = /*#__PURE__*/function (
 
     BaseEdgeModel_defineProperty(this, "customTextPosition", false);
 
-    BaseEdgeModel_defineProperty(this, "animationData", defaultAnimationData);
-
-    BaseEdgeModel_initializerDefineProperty(this, "style", _descriptor18, this);
+    BaseEdgeModel_initializerDefineProperty(this, "style", _descriptor19, this);
 
-    BaseEdgeModel_initializerDefineProperty(this, "arrowConfig", _descriptor19, this);
+    BaseEdgeModel_initializerDefineProperty(this, "arrowConfig", _descriptor20, this);
 
     this.graphModel = graphModel;
     this.initEdgeData(data);
     this.setAttributes();
   }
   /**
-   * @overridable 支持重写
    * 初始化边数据
+   * @overridable 支持重写
    * initNodeData和setAttributes的区别在于
    * initNodeData只在节点初始化的时候调用，用于初始化节点的所有属性。
-   * setAttributes除了初始化调用外，还会在properties发生变化了调用。
+   * setAttributes除了初始化调用外，还会在properties发生变化后调用。
    */
 
 
@@ -23550,11 +23533,13 @@ var BaseEdgeModel_BaseEdgeModel = (BaseEdgeModel_class = /*#__PURE__*/function (
         // 自定义边id > 全局定义边id > 内置
         var idGenerator = this.graphModel.idGenerator;
         var globalId = idGenerator && idGenerator(data.type);
-        if (globalId) data.id = globalId;
         var nodeId = this.createId();
-        if (nodeId) data.id = nodeId;
+        data.id = nodeId || globalId || uuid_createUuid();
       }
 
+      this.arrowConfig.markerEnd = "url(#marker-end-".concat(data.id, ")");
+      var adjustEdgeStartAndEnd = this.graphModel.editConfigModel.adjustEdgeStartAndEnd;
+      this.isShowAdjustPoint = adjustEdgeStartAndEnd;
       lodash_es_assign(this, edge_pickEdgeConfig(data));
       var overlapMode = this.graphModel.overlapMode;
 
@@ -23571,26 +23556,23 @@ var BaseEdgeModel_BaseEdgeModel = (BaseEdgeModel_class = /*#__PURE__*/function (
       this.formatText(data);
     }
     /**
-     * 设置model属性，每次properties发生变化会触发
+     * 设置model属性
      * @overridable 支持重写
+     * 每次properties发生变化会触发
      */
 
   }, {
     key: "setAttributes",
     value: function setAttributes() {}
-    /**
-     * @overridable 支持重写，自定义此类型节点默认生成方式
-     * @returns string
-     */
-
   }, {
     key: "createId",
     value: function createId() {
       return null;
     }
     /**
+     * 自定义边样式
+     *
      * @overridable 支持重写
-     * 获取当前节点样式
      * @returns 自定义边样式
      */
 
@@ -23600,8 +23582,21 @@ var BaseEdgeModel_BaseEdgeModel = (BaseEdgeModel_class = /*#__PURE__*/function (
       return BaseEdgeModel_objectSpread(BaseEdgeModel_objectSpread({}, this.graphModel.theme.baseEdge), this.style);
     }
     /**
+     * 自定义边调整点样式
+     *
+     * @overridable 支持重写
+     * 在isShowAdjustPoint为true时会显示调整点。
+     */
+
+  }, {
+    key: "getAdjustPointStyle",
+    value: function getAdjustPointStyle() {
+      return BaseEdgeModel_objectSpread({}, this.graphModel.theme.edgeAdjust);
+    }
+    /**
+     * 自定义边文本样式
+     *
      * @overridable 支持重写
-     * 获取当前节点文本样式
      */
 
   }, {
@@ -23612,33 +23607,61 @@ var BaseEdgeModel_BaseEdgeModel = (BaseEdgeModel_class = /*#__PURE__*/function (
       return lodash_es_cloneDeep(edgeText);
     }
     /**
+     * 自定义边动画样式
+     *
      * @overridable 支持重写
-     * 获取当前边的动画样式
-     * @returns 自定义边动画样式
+     * @example
+     * getEdgeAnimationStyle() {
+     *   const style = super.getEdgeAnimationStyle();
+     *   style.stroke = 'blue'
+     *   style.animationDuration = '30s'
+     *   style.animationDirection = 'reverse'
+     *   return style
+     * }
      */
 
   }, {
-    key: "getAnimation",
-    value: function getAnimation() {
-      var animationData = this.animationData;
-      return lodash_es_cloneDeep(animationData);
+    key: "getEdgeAnimationStyle",
+    value: function getEdgeAnimationStyle() {
+      var edgeAnimation = this.graphModel.theme.edgeAnimation;
+      return lodash_es_cloneDeep(edgeAnimation);
     }
     /**
+     * 自定义边箭头样式
+     *
      * @overridable 支持重写
-     * 获取当前边的动画样式
-     * @returns 自定义边动画样式
+     * @example
+     * getArrowStyle() {
+     *   const style = super.getArrowStyle();
+     *   style.stroke = 'green';
+     *   return style;
+     * }
      */
 
   }, {
-    key: "getEdgeAnimationStyle",
-    value: function getEdgeAnimationStyle() {
-      var edgeAnimation = this.graphModel.theme.edgeAnimation;
-      return lodash_es_cloneDeep(edgeAnimation);
+    key: "getArrowStyle",
+    value: function getArrowStyle() {
+      var edgeStyle = this.getEdgeStyle();
+      var edgeAnimationStyle = this.getEdgeAnimationStyle();
+      var arrow = this.graphModel.theme.arrow;
+      var stroke = this.isAnimation ? edgeAnimationStyle.stroke : edgeStyle.stroke;
+      return BaseEdgeModel_objectSpread(BaseEdgeModel_objectSpread({}, edgeStyle), {}, {
+        fill: stroke,
+        stroke: stroke
+      }, arrow);
     }
     /**
+     * 自定义边被选中时展示其范围的矩形框样式
+     *
      * @overridable 支持重写
-     * 获取outline样式，重写可以定义此类型边outline样式， 默认使用主题样式
-     * @returns 自定义outline样式
+     * @example
+     * // 隐藏outline
+     * getOutlineStyle() {
+     *   const style = super.getOutlineStyle();
+     *   style.stroke = "none";
+     *   style.hover.stroke = "none";
+     *   return style;
+     * }
      */
 
   }, {
@@ -23649,8 +23672,9 @@ var BaseEdgeModel_BaseEdgeModel = (BaseEdgeModel_class = /*#__PURE__*/function (
       return lodash_es_cloneDeep(outline);
     }
     /**
-     * @overridable 支持重新，重新自定义文本位置
-     * @returns 文本位置
+     * 重新自定义文本位置
+     *
+     * @overridable 支持重写
      */
 
   }, {
@@ -23661,6 +23685,10 @@ var BaseEdgeModel_BaseEdgeModel = (BaseEdgeModel_class = /*#__PURE__*/function (
         y: 0
       };
     }
+    /**
+     * 边的前一个节点
+     */
+
   }, {
     key: "sourceNode",
     get: function get() {
@@ -23668,6 +23696,10 @@ var BaseEdgeModel_BaseEdgeModel = (BaseEdgeModel_class = /*#__PURE__*/function (
 
       return (_this$graphModel = this.graphModel) === null || _this$graphModel === void 0 ? void 0 : (_this$graphModel$node = _this$graphModel.nodesMap[this.sourceNodeId]) === null || _this$graphModel$node === void 0 ? void 0 : _this$graphModel$node.model;
     }
+    /**
+     * 边的后一个节点
+     */
+
   }, {
     key: "targetNode",
     get: function get() {
@@ -23739,6 +23771,8 @@ var BaseEdgeModel_BaseEdgeModel = (BaseEdgeModel_class = /*#__PURE__*/function (
     }
     /**
      * 获取被保存时返回的数据
+     *
+     * @overridable 支持重写
      */
 
   }, {
@@ -23773,7 +23807,10 @@ var BaseEdgeModel_BaseEdgeModel = (BaseEdgeModel_class = /*#__PURE__*/function (
       return data;
     }
     /**
-     * 用于在历史记录时获取节点数据，
+     * 获取边的数据
+     *
+     * @overridable 支持重写
+     * 用于在历史记录时获取节点数据。
      * 在某些情况下，如果希望某个属性变化不引起history的变化，
      * 可以重写此方法。
      */
@@ -23783,24 +23820,45 @@ var BaseEdgeModel_BaseEdgeModel = (BaseEdgeModel_class = /*#__PURE__*/function (
     value: function getHistoryData() {
       return this.getData();
     }
+    /**
+     * 设置边的属性，会触发重新渲染
+     * @param key 属性名
+     * @param val 属性值
+     */
+
   }, {
     key: "setProperty",
     value: function setProperty(key, val) {
       this.properties[key] = formatData(val);
       this.setAttributes();
     }
+    /**
+     * 删除边的属性，会触发重新渲染
+     * @param key 属性名
+     */
+
   }, {
     key: "deleteProperty",
     value: function deleteProperty(key) {
       delete this.properties[key];
       this.setAttributes();
     }
+    /**
+     * 设置边的属性，会触发重新渲染
+     * @param key 属性名
+     * @param val 属性值
+     */
+
   }, {
     key: "setProperties",
     value: function setProperties(properties) {
       this.properties = BaseEdgeModel_objectSpread(BaseEdgeModel_objectSpread({}, this.properties), formatData(properties));
       this.setAttributes();
     }
+    /**
+     * 修改边的id
+     */
+
   }, {
     key: "changeEdgeId",
     value: function changeEdgeId(id) {
@@ -23817,18 +23875,32 @@ var BaseEdgeModel_BaseEdgeModel = (BaseEdgeModel_class = /*#__PURE__*/function (
       }
 
       this.id = id;
-    } // 设置样式
+    }
+    /**
+     * 设置边样式，用于插件开发时跳过自定义边的渲染。大多数情况下，不需要使用此方法。
+     * 如果需要设置边的样式，请使用 getEdgeStyle 方法自定义边样式。
+     */
 
   }, {
     key: "setStyle",
     value: function setStyle(key, val) {
       this.style = BaseEdgeModel_objectSpread(BaseEdgeModel_objectSpread({}, this.style), {}, BaseEdgeModel_defineProperty({}, key, formatData(val)));
     }
+    /**
+     * 设置边样式，用于插件开发时跳过自定义边的渲染。大多数情况下，不需要使用此方法。
+     * 如果需要设置边的样式，请使用 getEdgeStyle 方法自定义边样式。
+     */
+
   }, {
     key: "setStyles",
     value: function setStyles(styles) {
       this.style = BaseEdgeModel_objectSpread(BaseEdgeModel_objectSpread({}, this.style), formatData(styles));
     }
+    /**
+     * 设置边样式，用于插件开发时跳过自定义边的渲染。大多数情况下，不需要使用此方法。
+     * 如果需要设置边的样式，请使用 getEdgeStyle 方法自定义边样式。
+     */
+
   }, {
     key: "updateStyles",
     value: function updateStyles(styles) {
@@ -24173,28 +24245,35 @@ var BaseEdgeModel_BaseEdgeModel = (BaseEdgeModel_class = /*#__PURE__*/function (
   initializer: function initializer() {
     return false;
   }
-}), BaseEdgeModel_descriptor16 = BaseEdgeModel_applyDecoratedDescriptor(BaseEdgeModel_class.prototype, "zIndex", [mobx_module["C" /* observable */]], {
+}), BaseEdgeModel_descriptor16 = BaseEdgeModel_applyDecoratedDescriptor(BaseEdgeModel_class.prototype, "isShowAdjustPoint", [mobx_module["C" /* observable */]], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: function initializer() {
+    return false;
+  }
+}), BaseEdgeModel_descriptor17 = BaseEdgeModel_applyDecoratedDescriptor(BaseEdgeModel_class.prototype, "zIndex", [mobx_module["C" /* observable */]], {
   configurable: true,
   enumerable: true,
   writable: true,
   initializer: function initializer() {
     return 0;
   }
-}), BaseEdgeModel_descriptor17 = BaseEdgeModel_applyDecoratedDescriptor(BaseEdgeModel_class.prototype, "state", [mobx_module["C" /* observable */]], {
+}), _descriptor18 = BaseEdgeModel_applyDecoratedDescriptor(BaseEdgeModel_class.prototype, "state", [mobx_module["C" /* observable */]], {
   configurable: true,
   enumerable: true,
   writable: true,
   initializer: function initializer() {
     return 1;
   }
-}), _descriptor18 = BaseEdgeModel_applyDecoratedDescriptor(BaseEdgeModel_class.prototype, "style", [mobx_module["C" /* observable */]], {
+}), _descriptor19 = BaseEdgeModel_applyDecoratedDescriptor(BaseEdgeModel_class.prototype, "style", [mobx_module["C" /* observable */]], {
   configurable: true,
   enumerable: true,
   writable: true,
   initializer: function initializer() {
     return {};
   }
-}), _descriptor19 = BaseEdgeModel_applyDecoratedDescriptor(BaseEdgeModel_class.prototype, "arrowConfig", [mobx_module["C" /* observable */]], {
+}), _descriptor20 = BaseEdgeModel_applyDecoratedDescriptor(BaseEdgeModel_class.prototype, "arrowConfig", [mobx_module["C" /* observable */]], {
   configurable: true,
   enumerable: true,
   writable: true,
@@ -26320,6 +26399,22 @@ var drag_StepDrag = /*#__PURE__*/function () {
 // CONCATENATED MODULE: ./src/util/index.ts
 
 
+// CONCATENATED MODULE: ./src/constant/DefaultAnimation.ts
+// 不填或者false返回的配置，表示不开启所有动画
+var defaultAnimationCloseConfig = {
+  node: false,
+  edge: false
+}; // 仅使用true的时候返回的配置，表示开启所有动画
+
+var defaultAnimationOpenConfig = {
+  node: true,
+  edge: true
+};
+var defaultAnimationData = {
+  stroke: 'red',
+  strokeDasharray: '10 200',
+  className: 'lf-edge-animation'
+};
 // CONCATENATED MODULE: ./src/util/animation.ts
 
 
@@ -26491,6 +26586,7 @@ var GraphModel_GraphModel = (GraphModel_class = /*#__PURE__*/function () {
     this.edgeGenerator = createEdgeGenerator(this, edgeGenerator);
     this.width = options.width || this.rootEl.getBoundingClientRect().width;
     this.height = options.height || this.rootEl.getBoundingClientRect().height;
+    this.flowId = uuid_createUuid();
   }
 
   GraphModel_createClass(GraphModel, [{
@@ -28265,7 +28361,6 @@ var ToolOverlay_class;
 
 
 
-
 function ToolOverlay_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function ToolOverlay_defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -28286,8 +28381,6 @@ function ToolOverlay_isNativeReflectConstruct() { if (typeof Reflect === "undefi
 
 function ToolOverlay_getPrototypeOf(o) { ToolOverlay_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return ToolOverlay_getPrototypeOf(o); }
 
-function ToolOverlay_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 
 
 
@@ -28297,38 +28390,34 @@ var ToolOverlay_ToolOverlay = src_observer(ToolOverlay_class = /*#__PURE__*/func
   var _super = ToolOverlay_createSuper(ToolOverlay);
 
   function ToolOverlay() {
-    var _this;
-
     ToolOverlay_classCallCheck(this, ToolOverlay);
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
+    return _super.apply(this, arguments);
+  }
 
-    ToolOverlay_defineProperty(ToolOverlay_assertThisInitialized(_this), "setToolOverlayRef", function (element) {
-      var tool = _this.props.tool;
+  ToolOverlay_createClass(ToolOverlay, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      var _this$props = this.props,
+          tool = _this$props.tool,
+          graphModel = _this$props.graphModel;
+      var ToolOverlayElement = document.querySelector("#ToolOverlay_".concat(graphModel.flowId));
       var lf = tool.getInstance();
       lf.components.forEach(function (render) {
-        return render(lf, element);
+        return render(lf, ToolOverlayElement);
       });
       lf.components = []; // 保证extension组件的render只执行一次
-    });
-
-    return _this;
-  }
-
-  ToolOverlay_createClass(ToolOverlay, [{
-    key: "getTools",
-    value:
+    }
     /**
      * 外部传入的一般是HTMLElement
      */
-    function getTools() {
-      var _this$props = this.props,
-          tool = _this$props.tool,
-          graphModel = _this$props.graphModel;
+
+  }, {
+    key: "getTools",
+    value: function getTools() {
+      var _this$props2 = this.props,
+          tool = _this$props2.tool,
+          graphModel = _this$props2.graphModel;
       var tools = tool.getTools();
       var components = tools.map(function (item) {
         return Object(preact_module["g" /* h */])(item, {
@@ -28342,9 +28431,10 @@ var ToolOverlay_ToolOverlay = src_observer(ToolOverlay_class = /*#__PURE__*/func
   }, {
     key: "render",
     value: function render() {
+      var graphModel = this.props.graphModel;
       return Object(preact_module["g" /* h */])("div", {
         className: "lf-tool-overlay",
-        ref: this.setToolOverlayRef
+        id: "ToolOverlay_".concat(graphModel.flowId)
       }, this.getTools());
     }
   }]);
@@ -29533,6 +29623,7 @@ var Graph_Graph = src_observer(Graph_class = /*#__PURE__*/function (_Component)
       var adjustEdge = editConfigModel.adjustEdge;
       return Object(preact_module["g" /* h */])("div", {
         className: "lf-graph",
+        "flow-id": graphModel.flowId,
         style: style
       }, Object(preact_module["g" /* h */])(overlay_CanvasOverlay, {
         graphModel: graphModel,
@@ -30192,7 +30283,7 @@ var BaseNodeModel_BaseNodeModel = (BaseNodeModel_class = /*#__PURE__*/function (
   function BaseNodeModel(data, graphModel) {
     BaseNodeModel_classCallCheck(this, BaseNodeModel);
 
-    BaseNodeModel_defineProperty(this, "id", uuid_createUuid());
+    BaseNodeModel_defineProperty(this, "id", '');
 
     BaseNodeModel_initializerDefineProperty(this, "type", BaseNodeModel_descriptor, this);
 
@@ -30318,9 +30409,8 @@ var BaseNodeModel_BaseNodeModel = (BaseNodeModel_class = /*#__PURE__*/function (
         // 自定义节点id > 全局定义id > 内置
         var idGenerator = this.graphModel.idGenerator;
         var globalId = idGenerator && idGenerator(data.type);
-        if (globalId) data.id = globalId;
-        var customNodeId = this.createId();
-        if (customNodeId) data.id = customNodeId;
+        var nodeId = this.createId();
+        data.id = nodeId || globalId || uuid_createUuid();
       }
 
       this.formatText(data);
@@ -34775,8 +34865,6 @@ var LineText_LineText = /*#__PURE__*/function (_BaseText) {
 // CONCATENATED MODULE: ./src/view/edge/AdjustPoint.tsx
 function AdjustPoint_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { AdjustPoint_typeof = function _typeof(obj) { return typeof obj; }; } else { AdjustPoint_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return AdjustPoint_typeof(obj); }
 
-function AdjustPoint_extends() { AdjustPoint_extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return AdjustPoint_extends.apply(this, arguments); }
-
 function AdjustPoint_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; }
 
 function AdjustPoint_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { AdjustPoint_ownKeys(Object(source), true).forEach(function (key) { AdjustPoint_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { AdjustPoint_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -34843,7 +34931,6 @@ function AdjustPoint_defineProperty(obj, key, value) { if (key in obj) { Object.
 
 
 
-
 var AdjustType;
 
 (function (AdjustType) {
@@ -35113,7 +35200,9 @@ var AdjustPoint_AdjustPoint = /*#__PURE__*/function (_Component) {
     });
 
     AdjustPoint_defineProperty(AdjustPoint_assertThisInitialized(_this), "getAdjustPointStyle", function () {
-      var theme = _this.props.graphModel.theme;
+      var _this$props4 = _this.props,
+          theme = _this$props4.graphModel.theme,
+          edgeModel = _this$props4.edgeModel;
       var edgeAdjust = theme.edgeAdjust;
       return edgeAdjust;
     });
@@ -35148,14 +35237,14 @@ var AdjustPoint_AdjustPoint = /*#__PURE__*/function (_Component) {
   AdjustPoint_createClass(AdjustPoint, [{
     key: "isAllowAdjust",
     value: function isAllowAdjust(info) {
-      var _this$props4 = this.props,
-          _this$props4$edgeMode = _this$props4.edgeModel,
-          id = _this$props4$edgeMode.id,
-          sourceNode = _this$props4$edgeMode.sourceNode,
-          targetNode = _this$props4$edgeMode.targetNode,
-          sourceAnchorId = _this$props4$edgeMode.sourceAnchorId,
-          targetAnchorId = _this$props4$edgeMode.targetAnchorId,
-          type = _this$props4.type; // const newTargetNode = info.node;
+      var _this$props5 = this.props,
+          _this$props5$edgeMode = _this$props5.edgeModel,
+          id = _this$props5$edgeMode.id,
+          sourceNode = _this$props5$edgeMode.sourceNode,
+          targetNode = _this$props5$edgeMode.targetNode,
+          sourceAnchorId = _this$props5$edgeMode.sourceAnchorId,
+          targetAnchorId = _this$props5$edgeMode.targetAnchorId,
+          type = _this$props5.type; // const newTargetNode = info.node;
 
       var newSourceNode = null;
       var newTargetNode = null;
@@ -35214,19 +35303,15 @@ var AdjustPoint_AdjustPoint = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props5 = this.props,
-          x = _this$props5.x,
-          y = _this$props5.y;
+      var _this$props6 = this.props,
+          x = _this$props6.x,
+          y = _this$props6.y,
+          getAdjustPointShape = _this$props6.getAdjustPointShape;
       var dragging = this.state.dragging;
-      var style = this.getAdjustPointStyle();
-      return Object(preact_module["g" /* h */])("g", null, Object(preact_module["g" /* h */])(Circle, AdjustPoint_extends({
-        className: "lf-edge-adjust-point"
-      }, style, {
-        x: x,
-        y: y,
-        onMouseDown: this.handleMouseDown,
-        "pointer-events": dragging ? 'none' : ''
-      })));
+      return Object(preact_module["g" /* h */])("g", {
+        pointerEvents: dragging ? 'none' : '',
+        onMouseDown: this.handleMouseDown
+      }, getAdjustPointShape(x, y, dragging));
     }
   }]);
 
@@ -35239,14 +35324,6 @@ function BaseEdge_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol ===
 
 function BaseEdge_extends() { BaseEdge_extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return BaseEdge_extends.apply(this, arguments); }
 
-function BaseEdge_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; }
-
-function BaseEdge_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { BaseEdge_ownKeys(Object(source), true).forEach(function (key) { BaseEdge_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { BaseEdge_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-
-
-
-
 
 
 
@@ -35291,6 +35368,7 @@ function BaseEdge_defineProperty(obj, key, value) { if (key in obj) { Object.def
 
 
 
+
 var BaseEdge_BaseEdge = /*#__PURE__*/function (_Component) {
   BaseEdge_inherits(BaseEdge, _Component);
 
@@ -35315,6 +35393,17 @@ var BaseEdge_BaseEdge = /*#__PURE__*/function (_Component) {
 
     BaseEdge_defineProperty(BaseEdge_assertThisInitialized(_this), "textRef", Object(preact_module["f" /* createRef */])());
 
+    BaseEdge_defineProperty(BaseEdge_assertThisInitialized(_this), "getAdjustPointShape", function (x, y) {
+      var model = _this.props.model;
+      var style = model.getAdjustPointStyle();
+      return Object(preact_module["g" /* h */])(Circle, BaseEdge_extends({
+        className: "lf-edge-adjust-point"
+      }, style, {
+        x: x,
+        y: y
+      }));
+    });
+
     BaseEdge_defineProperty(BaseEdge_assertThisInitialized(_this), "handleHover", function (hovered, ev) {
       var _this$props = _this.props,
           model = _this$props.model,
@@ -35461,19 +35550,29 @@ var BaseEdge_BaseEdge = /*#__PURE__*/function (_Component) {
       _this.toFront();
     });
 
-    BaseEdge_defineProperty(BaseEdge_assertThisInitialized(_this), "getIsDragging", function () {
-      return false;
-    });
-
     return _this;
   }
 
   BaseEdge_createClass(BaseEdge, [{
     key: "getShape",
-    value: function getShape() {}
+    value:
+    /**
+     * 不支持重写，请使用getEdge
+     */
+    function getShape() {
+      return Object(preact_module["g" /* h */])("g", null, this.getEdge());
+    }
+    /**
+     * @deprecated 请使用model.getTextStyle
+     */
+
   }, {
     key: "getTextStyle",
     value: function getTextStyle() {}
+    /**
+     * @overridable 可重写，自定义边文本DOM
+     */
+
   }, {
     key: "getText",
     value: function getText() {
@@ -35482,7 +35581,7 @@ var BaseEdge_BaseEdge = /*#__PURE__*/function (_Component) {
           graphModel = _this$props4.graphModel; // 文本被编辑的时候，显示编辑框，不显示文本。
 
       if (model.state === ElementState.TEXT_EDIT) {
-        return '';
+        return null;
       }
 
       var draggable = false;
@@ -35500,6 +35599,10 @@ var BaseEdge_BaseEdge = /*#__PURE__*/function (_Component) {
         draggable: draggable
       });
     }
+    /**
+     * @deprecated
+     */
+
   }, {
     key: "getArrowInfo",
     value: function getArrowInfo() {
@@ -35516,31 +35619,31 @@ var BaseEdge_BaseEdge = /*#__PURE__*/function (_Component) {
         isSelected: isSelected
       };
     }
+    /**
+     * @deprecated 请使用model.getArrowStyle
+     */
+
   }, {
     key: "getArrowStyle",
     value: function getArrowStyle() {
-      var _this$props5 = this.props,
-          model = _this$props5.model,
-          graphModel = _this$props5.graphModel;
-      var edgeStyle = model.getEdgeStyle();
-      var edgeAnimationStyle = model.getEdgeAnimationStyle();
-      var arrow = graphModel.theme.arrow;
-      var stroke = model.isAnimation ? edgeAnimationStyle.stroke : edgeStyle.stroke;
-      return BaseEdge_objectSpread(BaseEdge_objectSpread({}, edgeStyle), {}, {
-        fill: stroke,
-        stroke: stroke
-      }, arrow);
+      console.error('getArrowStyle is deprecated in 1.2.0, please use model.getArrowStyle');
+      return null;
     }
+    /**
+     * 定义边的箭头，不支持重写。请使用getStartArrow和getEndArrow
+     */
+
   }, {
     key: "getArrow",
     value: function getArrow() {
-      var id = this.props.model.id;
+      var model = this.props.model;
+      var id = model.id;
 
-      var _this$getArrowStyle = this.getArrowStyle(),
-          _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;
+      var _model$getArrowStyle = model.getArrowStyle(),
+          _model$getArrowStyle$ = _model$getArrowStyle.refY,
+          refY = _model$getArrowStyle$ === void 0 ? 0 : _model$getArrowStyle$,
+          _model$getArrowStyle$2 = _model$getArrowStyle.refX,
+          refX = _model$getArrowStyle$2 === void 0 ? 2 : _model$getArrowStyle$2;
 
       return Object(preact_module["g" /* h */])("g", null, Object(preact_module["g" /* h */])("defs", null, Object(preact_module["g" /* h */])("marker", {
         id: "marker-start-".concat(id),
@@ -35558,14 +35661,30 @@ var BaseEdge_BaseEdge = /*#__PURE__*/function (_Component) {
         markerUnits: "userSpaceOnUse"
       }, this.getEndArrow())));
     }
+    /**
+     * @overridable 可重写，自定义边起点箭头形状。
+     * @example
+     * getStartArrow() {
+     *  const { model } = this.props;
+     *  const { stroke, strokeWidth, offset, verticalLength } = model.getArrowStyle();
+     *  return (
+     *    h('path', {
+     *      d: ''
+     *    })
+     *  )
+     * }
+     */
+
   }, {
     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;
+      var model = this.props.model;
+
+      var _model$getArrowStyle2 = model.getArrowStyle(),
+          stroke = _model$getArrowStyle2.stroke,
+          strokeWidth = _model$getArrowStyle2.strokeWidth,
+          offset = _model$getArrowStyle2.offset,
+          verticalLength = _model$getArrowStyle2.verticalLength;
 
       return Object(preact_module["g" /* h */])("path", {
         stroke: stroke,
@@ -35574,14 +35693,30 @@ var BaseEdge_BaseEdge = /*#__PURE__*/function (_Component) {
         d: "M 0 0 L ".concat(offset, " -").concat(verticalLength, " L ").concat(offset, " ").concat(verticalLength, " Z")
       });
     }
+    /**
+     * @overridable 可重写，自定义边终点箭头形状。
+     * @example
+     * getEndArrow() {
+     *  const { model } = this.props;
+     *  const { stroke, strokeWidth, offset, verticalLength } = model.getArrowStyle();
+     *  return (
+     *    h('path', {
+     *      d: ''
+     *    })
+     *  )
+     * }
+     */
+
   }, {
     key: "getEndArrow",
     value: function getEndArrow() {
-      var _this$getArrowStyle3 = this.getArrowStyle(),
-          stroke = _this$getArrowStyle3.stroke,
-          strokeWidth = _this$getArrowStyle3.strokeWidth,
-          offset = _this$getArrowStyle3.offset,
-          verticalLength = _this$getArrowStyle3.verticalLength;
+      var model = this.props.model;
+
+      var _model$getArrowStyle3 = model.getArrowStyle(),
+          stroke = _model$getArrowStyle3.stroke,
+          strokeWidth = _model$getArrowStyle3.strokeWidth,
+          offset = _model$getArrowStyle3.offset,
+          verticalLength = _model$getArrowStyle3.verticalLength;
 
       return Object(preact_module["g" /* h */])("path", {
         stroke: stroke,
@@ -35590,36 +35725,74 @@ var BaseEdge_BaseEdge = /*#__PURE__*/function (_Component) {
         transform: "rotate(180)",
         d: "M 0 0 L ".concat(offset, " -").concat(verticalLength, " L ").concat(offset, " ").concat(verticalLength, " Z")
       });
-    } // 起点终点，可以修改起点/终点为其他节点
+    }
+    /**
+     * @overridable 可重写，自定义调整边连接节点形状。在开启了adjustEdgeStartAndEnd的时候，会显示调整点。
+     * @param x 调整点x坐标
+     * @param y 调整点y坐标
+     * @example
+     * getAdjustPointShape(x, y) {
+     *  const { model } = this.props;
+     *  const style = model.getAdjustPointStyle();
+     *  return (
+     *    h('circle', {
+     *      ...style,
+     *     x,
+     *     y
+     *    })
+     *  )
+     * }
+     */
 
   }, {
     key: "getAdjustPoints",
-    value: function getAdjustPoints() {
-      var _this$props6 = this.props,
-          model = _this$props6.model,
-          graphModel = _this$props6.graphModel;
+    value:
+    /**
+     * 不支持重写。请使用getAdjustPointShape
+     */
+    function getAdjustPoints() {
+      var _this$props5 = this.props,
+          model = _this$props5.model,
+          graphModel = _this$props5.graphModel;
       var start = model.getAdjustStart();
       var end = model.getAdjustEnd();
       return Object(preact_module["g" /* h */])("g", null, Object(preact_module["g" /* h */])(AdjustPoint_AdjustPoint, BaseEdge_extends({
         type: "SOURCE"
       }, start, {
+        getAdjustPointShape: this.getAdjustPointShape,
         edgeModel: model,
         graphModel: graphModel
       })), Object(preact_module["g" /* h */])(AdjustPoint_AdjustPoint, BaseEdge_extends({
         type: "TARGET"
       }, end, {
+        getAdjustPointShape: this.getAdjustPointShape,
         edgeModel: model,
         graphModel: graphModel
       })));
     }
+    /**
+     * @deprecated
+     */
+
   }, {
     key: "getAnimation",
-    value: function getAnimation() {}
+    value: function getAnimation() {
+      console.error('getAnimation is deprecated in 1.2.0, please use model.getEdgeAnimationStyle');
+    }
+    /**
+     * @overridable 可重写，在完全自定义边的时候，可以重写此方法，来自定义边的选区。
+     */
+
   }, {
     key: "getAppendWidth",
     value: function getAppendWidth() {
       return Object(preact_module["g" /* h */])("g", null);
     }
+    /**
+     * 不建议重写，此方法为扩大边选区，方便用户点击选中边。
+     * 如果需要自定义边选区，请使用getAppendWidth。
+     */
+
   }, {
     key: "getAppend",
     value: function getAppend() {
@@ -35627,31 +35800,50 @@ var BaseEdge_BaseEdge = /*#__PURE__*/function (_Component) {
         className: "lf-edge-append"
       }, this.getAppendWidth());
     }
+    /**
+     * 不支持重写，如果想要基于hover状态设置不同的样式，请在model中使用isHovered属性。
+     */
+
+  }, {
+    key: "getEdge",
+    value:
+    /**
+     * @overridable 支持重写, 此方法为获取边的形状，如果需要自定义边的形状，请重写此方法。
+     * @example https://docs.logic-flow.cn/docs/#/zh/guide/basic/edge?id=%e5%9f%ba%e4%ba%8e-react-%e7%bb%84%e4%bb%b6%e8%87%aa%e5%ae%9a%e4%b9%89%e8%be%b9
+     */
+    function getEdge() {
+      return null;
+    }
+    /**
+     * @overridable 支持重写, 此方法为边在被选中时将其置顶，如果不需要此功能，可以重写此方法。
+     */
+
   }, {
     key: "toFront",
     value: function toFront() {
-      var _this$props7 = this.props,
-          graphModel = _this$props7.graphModel,
-          model = _this$props7.model;
+      var _this$props6 = this.props,
+          graphModel = _this$props6.graphModel,
+          model = _this$props6.model;
       var overlapMode = graphModel.overlapMode;
 
       if (overlapMode !== OverlapMode.INCREASE) {
         graphModel.toFront(model.id);
       }
     }
+    /**
+     * 不建议重写，如果要自定义边的形状，请重写getEdge方法。
+     */
+
   }, {
     key: "render",
     value: function render() {
-      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有动画
-
-      var isShowAnimation = isSelected && animation.edge && graphModel.getSelectElements().edges.length === 1;
+      var _this$props7 = this.props,
+          _this$props7$model = _this$props7.model,
+          isSelected = _this$props7$model.isSelected,
+          isHitable = _this$props7$model.isHitable,
+          isShowAdjustPoint = _this$props7$model.isShowAdjustPoint,
+          graphModel = _this$props7.graphModel;
+      var animation = graphModel.animation;
       return Object(preact_module["g" /* h */])("g", null, Object(preact_module["g" /* h */])("g", {
         className: ['lf-edge', !isHitable && 'pointer-none', isSelected && 'lf-edge-selected'].filter(Boolean).join(' '),
         onMouseDown: this.handleMouseDown,
@@ -35660,7 +35852,7 @@ var BaseEdge_BaseEdge = /*#__PURE__*/function (_Component) {
         onMouseOver: this.setHoverON,
         onMouseEnter: this.setHoverON,
         onMouseLeave: this.setHoverOFF
-      }, this.getShape(), this.getAppend(), isShowAnimation && this.getAnimation(), this.getText(), this.getArrow()), adjustEdgeStartAndEnd && isSelected && !isDragging ? this.getAdjustPoints() : '');
+      }, this.getShape(), this.getAppend(), this.getText(), this.getArrow()), isShowAdjustPoint && isSelected ? this.getAdjustPoints() : '');
     }
   }]);
 
@@ -35774,7 +35966,12 @@ var LineEdge_LineEdge = /*#__PURE__*/function (_BaseEdge) {
 
   LineEdge_createClass(LineEdge, [{
     key: "getEdge",
-    value: function getEdge() {
+    value:
+    /**
+     * @overridable 支持重写, 此方法为获取边的形状，如果需要自定义边的形状，请重写此方法。
+     * @example https://docs.logic-flow.cn/docs/#/zh/guide/basic/edge?id=%e5%9f%ba%e4%ba%8e-react-%e7%bb%84%e4%bb%b6%e8%87%aa%e5%ae%9a%e4%b9%89%e8%be%b9
+     */
+    function getEdge() {
       var model = this.props.model;
       var startPoint = model.startPoint,
           endPoint = model.endPoint,
@@ -35808,34 +36005,10 @@ var LineEdge_LineEdge = /*#__PURE__*/function (_BaseEdge) {
         }
       } : {}));
     }
-  }, {
-    key: "getShape",
-    value: function getShape() {
-      return Object(preact_module["g" /* h */])("g", null, this.getEdge());
-    }
-  }, {
-    key: "getAnimation",
-    value: function getAnimation() {
-      var model = this.props.model;
-
-      var _model$getAnimation = model.getAnimation(),
-          stroke = _model$getAnimation.stroke,
-          className = _model$getAnimation.className,
-          strokeDasharray = _model$getAnimation.strokeDasharray;
+    /**
+     * @overridable 可重写，在完全自定义边的时候，可以重写此方法，来自定义边的选区。
+     */
 
-      var startPoint = model.startPoint,
-          endPoint = model.endPoint;
-      var style = model.getEdgeStyle();
-      return Object(preact_module["g" /* h */])("g", null, Object(preact_module["g" /* h */])(basic_shape_Line, LineEdge_extends({}, style, {
-        x1: startPoint.x,
-        y1: startPoint.y,
-        x2: endPoint.x,
-        y2: endPoint.y,
-        className: className,
-        strokeDasharray: strokeDasharray,
-        stroke: stroke
-      })));
-    }
   }, {
     key: "getAppendWidth",
     value: function getAppendWidth() {
@@ -36013,13 +36186,15 @@ var PolylineEdge_PolylineEdge = /*#__PURE__*/function (_BaseEdge) {
 
     PolylineEdge_defineProperty(PolylineEdge_assertThisInitialized(_this), "isDragging", void 0);
 
-    PolylineEdge_defineProperty(PolylineEdge_assertThisInitialized(_this), "appendInfo", void 0);
+    PolylineEdge_defineProperty(PolylineEdge_assertThisInitialized(_this), "isShowAdjustPointTemp", void 0);
 
-    PolylineEdge_defineProperty(PolylineEdge_assertThisInitialized(_this), "dragHandler", void 0);
+    PolylineEdge_defineProperty(PolylineEdge_assertThisInitialized(_this), "appendInfo", void 0);
 
     PolylineEdge_defineProperty(PolylineEdge_assertThisInitialized(_this), "onDragStart", function () {
       var polylineModel = _this.props.model;
       polylineModel.dragAppendStart();
+      _this.isShowAdjustPointTemp = polylineModel.isShowAdjustPoint;
+      polylineModel.isShowAdjustPoint = false;
     });
 
     PolylineEdge_defineProperty(PolylineEdge_assertThisInitialized(_this), "onDragging", function (_ref) {
@@ -36062,7 +36237,8 @@ var PolylineEdge_PolylineEdge = /*#__PURE__*/function (_BaseEdge) {
           eventCenter = _this$props2.graphModel.eventCenter;
       var polylineModel = model;
       polylineModel.dragAppendEnd();
-      _this.isDragging = false; // 情况当前拖拽的线段信息
+      _this.isDragging = false;
+      polylineModel.isShowAdjustPoint = _this.isShowAdjustPointTemp; // 情况当前拖拽的线段信息
 
       _this.appendInfo = undefined; // 向外抛出事件
 
@@ -36074,18 +36250,14 @@ var PolylineEdge_PolylineEdge = /*#__PURE__*/function (_BaseEdge) {
     PolylineEdge_defineProperty(PolylineEdge_assertThisInitialized(_this), "beforeDragStart", function (e, appendInfo) {
       // 如果允许拖拽调整触发事件处理
       if (appendInfo.dragAble) {
-        _this.dragHandler(e);
+        _this.drag.handleMouseDown(e);
       } // 记录当前拖拽的线段信息
 
 
       _this.appendInfo = appendInfo;
     });
 
-    PolylineEdge_defineProperty(PolylineEdge_assertThisInitialized(_this), "getIsDragging", function () {
-      return _this.isDragging;
-    });
-
-    _this.drag = createDrag({
+    _this.drag = new drag_StepDrag({
       onDragStart: _this.onDragStart,
       onDragging: _this.onDragging,
       onDragEnd: _this.onDragEnd,
@@ -36093,10 +36265,19 @@ var PolylineEdge_PolylineEdge = /*#__PURE__*/function (_BaseEdge) {
     });
     return _this;
   }
+  /**
+   * 不支持重写
+   */
+
 
   PolylineEdge_createClass(PolylineEdge, [{
     key: "getEdge",
-    value: function getEdge() {
+    value:
+    /**
+     * @overridable 支持重写, 此方法为获取边的形状，如果需要自定义边的形状，请重写此方法。
+     * @example https://docs.logic-flow.cn/docs/#/zh/guide/basic/edge?id=%e5%9f%ba%e4%ba%8e-react-%e7%bb%84%e4%bb%b6%e8%87%aa%e5%ae%9a%e4%b9%89%e8%be%b9
+     */
+    function getEdge() {
       var model = this.props.model;
       var points = model.points,
           isAnimation = model.isAnimation,
@@ -36126,30 +36307,10 @@ var PolylineEdge_PolylineEdge = /*#__PURE__*/function (_BaseEdge) {
         }
       } : {}));
     }
-  }, {
-    key: "getShape",
-    value: function getShape() {
-      return Object(preact_module["g" /* h */])("g", null, this.getEdge());
-    }
-  }, {
-    key: "getAnimation",
-    value: function getAnimation() {
-      var model = this.props.model;
-
-      var _model$getAnimation = model.getAnimation(),
-          stroke = _model$getAnimation.stroke,
-          className = _model$getAnimation.className,
-          strokeDasharray = _model$getAnimation.strokeDasharray;
+    /**
+     * @deprecated
+     */
 
-      var style = model.getEdgeStyle();
-      return Object(preact_module["g" /* h */])("g", null, Object(preact_module["g" /* h */])(basic_shape_Polyline, PolylineEdge_extends({
-        points: model.points
-      }, style, {
-        className: className,
-        strokeDasharray: strokeDasharray,
-        stroke: stroke
-      })));
-    }
   }, {
     key: "getArrowInfo",
     value: function getArrowInfo() {
@@ -36225,6 +36386,10 @@ var PolylineEdge_PolylineEdge = /*#__PURE__*/function (_BaseEdge) {
         strokeDasharray: strokeDasharray
       });
     }
+    /**
+     * @overridable 可重写，在完全自定义边的时候，可以重写此方法，来自定义边的选区。
+     */
+
   }, {
     key: "getAppendWidth",
     value: function getAppendWidth() {
@@ -36261,10 +36426,7 @@ var PolylineEdge_PolylineEdge = /*#__PURE__*/function (_BaseEdge) {
         var adjustEdge = editConfigModel.adjustEdge,
             adjustEdgeMiddle = editConfigModel.adjustEdgeMiddle;
 
-        if (!adjustEdge || !draggable) {
-          _this2.dragHandler = function () {};
-        } else {
-          _this2.dragHandler = _this2.drag;
+        if (adjustEdge && draggable) {
           var startIndex = appendInfo.startIndex,
               endIndex = appendInfo.endIndex; // 如果不允许调整起点和终点相连的线段，设置该线段appendInfo的dragAble为false
 
@@ -36383,7 +36545,12 @@ var BezierEdge_BezierEdge = /*#__PURE__*/function (_BaseEdge) {
 
   BezierEdge_createClass(BezierEdge, [{
     key: "getEdge",
-    value: function getEdge() {
+    value:
+    /**
+     * @overridable 支持重写, 此方法为获取边的形状，如果需要自定义边的形状，请重写此方法。
+     * @example https://docs.logic-flow.cn/docs/#/zh/guide/basic/edge?id=%e5%9f%ba%e4%ba%8e-react-%e7%bb%84%e4%bb%b6%e8%87%aa%e5%ae%9a%e4%b9%89%e8%be%b9
+     */
+    function getEdge() {
       var model = this.props.model;
       var style = model.getEdgeStyle();
       var path = model.path,
@@ -36413,30 +36580,9 @@ var BezierEdge_BezierEdge = /*#__PURE__*/function (_BaseEdge) {
         }
       } : {}));
     }
-  }, {
-    key: "getShape",
-    value: function getShape() {
-      return Object(preact_module["g" /* h */])("g", null, this.getEdge());
-    }
-  }, {
-    key: "getAnimation",
-    value: function getAnimation() {
-      var model = this.props.model;
-
-      var _model$getAnimation = model.getAnimation(),
-          stroke = _model$getAnimation.stroke,
-          className = _model$getAnimation.className,
-          strokeDasharray = _model$getAnimation.strokeDasharray;
-
-      var style = model.getEdgeStyle();
-      return Object(preact_module["g" /* h */])("g", null, Object(preact_module["g" /* h */])(basic_shape_Path, BezierEdge_extends({
-        d: model.path
-      }, style, {
-        className: className,
-        strokeDasharray: strokeDasharray,
-        stroke: stroke
-      })));
-    } // 扩大bezier曲线可点击范围
+    /**
+     * @overridable 可重写，在完全自定义边的时候，可以重写此方法，来自定义边的选区。
+     */
 
   }, {
     key: "getAppendWidth",
@@ -36449,6 +36595,10 @@ var BezierEdge_BezierEdge = /*#__PURE__*/function (_BaseEdge) {
         fill: "none"
       });
     }
+    /**
+     * @deprecated
+     */
+
   }, {
     key: "getArrowInfo",
     value: function getArrowInfo() {
@@ -37157,7 +37307,6 @@ function TextEditTool_objectSpread(target) { for (var i = 1; i < arguments.lengt
 
 
 
-
 function TextEditTool_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function TextEditTool_defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -37238,28 +37387,6 @@ var TextEditTool_TextEdit = src_observer(TextEditTool_class = (_temp = _class2 =
   }
 
   TextEditTool_createClass(TextEdit, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      if (this.ref.current) {
-        this.ref.current.focus();
-        this.placeCaretAtEnd(this.ref.current);
-      } // @see https://github.com/didi/LogicFlow/issues/152
-
-
-      var graphModel = this.props.graphModel;
-      var eventCenter = graphModel.eventCenter;
-      eventCenter.on("".concat(EventType.GRAPH_TRANSFORM, ",").concat(EventType.NODE_CLICK, ",").concat(EventType.BLANK_CLICK, " "), function () {
-        var textEditElement = graphModel.textEditElement,
-            _graphModel$editConfi = graphModel.editConfigModel,
-            edgeTextEdit = _graphModel$editConfi.edgeTextEdit,
-            nodeTextEdit = _graphModel$editConfi.nodeTextEdit; // fix #826, 保留之前的文本可以编辑点击空白才设置为不可编辑。如果以后有其他需求再改。
-
-        if ((edgeTextEdit || nodeTextEdit) && textEditElement) {
-          graphModel.textEditElement.setElementState(ElementState.DEFAULT);
-        }
-      });
-    }
-  }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate() {
       var graphModel = this.props.graphModel;
@@ -37695,6 +37822,7 @@ var MultipleSelectTool_MultipleSelect = src_observer(MultipleSelectTool_class =
 
 
 
+
 function tool_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function tool_defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -37706,6 +37834,7 @@ function tool_defineProperty(obj, key, value) { if (key in obj) { Object.defineP
 
 
 
+
 var tool_Tool = /*#__PURE__*/function () {
   function Tool(instance) {
     tool_classCallCheck(this, Tool);
@@ -37726,7 +37855,21 @@ var tool_Tool = /*#__PURE__*/function () {
 
     if (!this.isDisabledTool(MultipleSelectTool_MultipleSelect.toolName)) {
       this.registerTool(MultipleSelectTool_MultipleSelect.toolName, MultipleSelectTool_MultipleSelect);
-    }
+    } // @see https://github.com/didi/LogicFlow/issues/152
+
+
+    var graphModel = instance.graphModel;
+    var eventCenter = graphModel.eventCenter;
+    eventCenter.on("".concat(EventType.GRAPH_TRANSFORM, ",").concat(EventType.NODE_CLICK, ",").concat(EventType.BLANK_CLICK, " "), function () {
+      var textEditElement = graphModel.textEditElement,
+          _graphModel$editConfi = graphModel.editConfigModel,
+          edgeTextEdit = _graphModel$editConfi.edgeTextEdit,
+          nodeTextEdit = _graphModel$editConfi.nodeTextEdit; // fix #826, 保留之前的文本可以编辑点击空白才设置为不可编辑。如果以后有其他需求再改。
+
+      if ((edgeTextEdit || nodeTextEdit) && textEditElement) {
+        graphModel.textEditElement.setElementState(ElementState.DEFAULT);
+      }
+    });
   }
 
   tool_createClass(Tool, [{
@@ -37798,7 +37941,7 @@ var keyboard_Keyboard = /*#__PURE__*/function () {
     this.options = options;
     var lf = options.lf;
     this.target = lf.container;
-    this.mousetrap = new mousetrap_default.a(this.target);
+    this.mousetrap = new mousetrap_default.a();
 
     if (options.keyboard.enabled) {
       this.enable(true);
@@ -38469,7 +38612,9 @@ var LogicFlow_LogicFlow = /*#__PURE__*/function () {
   }, {
     key: "getDataById",
     value: function getDataById(id) {
-      return this.graphModel.getElement(id).getData();
+      var _this$graphModel$getE;
+
+      return (_this$graphModel$getE = this.graphModel.getElement(id)) === null || _this$graphModel$getE === void 0 ? void 0 : _this$graphModel$getE.getData();
     }
     /**
      * 修改指定节点类型
@@ -38803,16 +38948,16 @@ var LogicFlow_LogicFlow = /*#__PURE__*/function () {
   }, {
     key: "setProperties",
     value: function setProperties(id, properties) {
-      var _this$graphModel$getE;
+      var _this$graphModel$getE2;
 
-      (_this$graphModel$getE = this.graphModel.getElement(id)) === null || _this$graphModel$getE === void 0 ? void 0 : _this$graphModel$getE.setProperties(formatData(properties));
+      (_this$graphModel$getE2 = this.graphModel.getElement(id)) === null || _this$graphModel$getE2 === void 0 ? void 0 : _this$graphModel$getE2.setProperties(formatData(properties));
     }
   }, {
     key: "deleteProperty",
     value: function deleteProperty(id, key) {
-      var _this$graphModel$getE2;
+      var _this$graphModel$getE3;
 
-      (_this$graphModel$getE2 = this.graphModel.getElement(id)) === null || _this$graphModel$getE2 === void 0 ? void 0 : _this$graphModel$getE2.deleteProperty(key);
+      (_this$graphModel$getE3 = this.graphModel.getElement(id)) === null || _this$graphModel$getE3 === void 0 ? void 0 : _this$graphModel$getE3.deleteProperty(key);
     }
     /**
      * 获取元素的自定义属性
@@ -38823,9 +38968,9 @@ var LogicFlow_LogicFlow = /*#__PURE__*/function () {
   }, {
     key: "getProperties",
     value: function getProperties(id) {
-      var _this$graphModel$getE3;
+      var _this$graphModel$getE4;
 
-      return (_this$graphModel$getE3 = this.graphModel.getElement(id)) === null || _this$graphModel$getE3 === void 0 ? void 0 : _this$graphModel$getE3.getProperties();
+      return (_this$graphModel$getE4 = this.graphModel.getElement(id)) === null || _this$graphModel$getE4 === void 0 ? void 0 : _this$graphModel$getE4.getProperties();
     }
     /**
      * 将某个元素放置到顶部。