@logicflow/core 2.2.0-alpha.0 → 2.2.0-alpha.2

package/es/model/EditConfigModel.d.ts

@@ -115,6 +115,7 @@ export interface IEditConfigType {
     edgeTextMode: TextMode;
     snapGrid: boolean;
     isPinching: boolean;
+    anchorProximityValidate: boolean;
 }
 export type IConfigKeys = keyof IEditConfigType;
 /**
@@ -147,6 +148,7 @@ export declare class EditConfigModel {
     edgeTextDraggable: boolean;
     edgeTextMultiple: boolean;
     edgeTextVertical: boolean;
+    anchorProximityValidate: boolean;
     /*********************************************************
      * 节点相关配置
      ********************************************************/
@@ -172,7 +174,7 @@ export declare class EditConfigModel {
     multipleSelectKey: string;
     constructor(config: Partial<IEditConfigType>);
     updateEditConfig(config: Partial<IEditConfigType>): void;
-    computeConfig(config: Partial<IEditConfigType>): Partial<IEditConfigType> & Pick<Partial<IEditConfigType>, "textMode" | "adjustEdgeStartAndEnd" | "edgeTextDraggable" | "edgeTextEdit" | "nodeTextDraggable" | "nodeTextEdit" | "adjustEdge" | "edgeTextMode" | "nodeTextMode" | "allowRotate" | "allowResize" | "isSilentMode" | "stopScrollGraph" | "stopZoomGraph" | "stopMoveGraph" | "textEdit" | "snapGrid" | "adjustEdgeMiddle" | "adjustEdgeStart" | "adjustEdgeEnd" | "adjustNodePosition" | "hideAnchors" | "autoExpand" | "hoverOutline" | "nodeSelectedOutline" | "edgeSelectedOutline" | "textDraggable" | "multipleSelectKey" | "nodeTextMultiple" | "edgeTextMultiple" | "nodeTextVertical" | "edgeTextVertical" | "isPinching">;
+    computeConfig(config: Partial<IEditConfigType>): Partial<IEditConfigType> & Pick<Partial<IEditConfigType>, "textMode" | "adjustEdgeStartAndEnd" | "edgeTextDraggable" | "edgeTextEdit" | "nodeTextDraggable" | "nodeTextEdit" | "adjustEdge" | "edgeTextMode" | "nodeTextMode" | "allowRotate" | "allowResize" | "isSilentMode" | "stopScrollGraph" | "stopZoomGraph" | "stopMoveGraph" | "textEdit" | "snapGrid" | "adjustEdgeMiddle" | "adjustEdgeStart" | "adjustEdgeEnd" | "adjustNodePosition" | "hideAnchors" | "autoExpand" | "hoverOutline" | "nodeSelectedOutline" | "edgeSelectedOutline" | "textDraggable" | "multipleSelectKey" | "nodeTextMultiple" | "edgeTextMultiple" | "nodeTextVertical" | "edgeTextVertical" | "isPinching" | "anchorProximityValidate">;
     updateTextMode(textMode: TextMode): void;
     getConfig(): IEditConfigType;
 }

package/es/model/EditConfigModel.js

@@ -63,6 +63,7 @@ var allKeys = [
     'nodeTextVertical', // 节点文本是否纵向显示
     'edgeTextVertical', // 边文本是否纵向显示
     'isPinching', //是否是双指捏合态
+    'anchorProximityValidate', // 仅在靠近锚点时触发连接校验
 ];
 /**
  * 页面编辑配置
@@ -96,6 +97,7 @@ var EditConfigModel = /** @class */ (function () {
         this.edgeTextDraggable = false;
         this.edgeTextMultiple = false; // 是否支持多个边文本
         this.edgeTextVertical = false; // 边文本朝向是否是纵向
+        this.anchorProximityValidate = false; // 仅在靠近锚点时触发连接校验
         /*********************************************************
          * 节点相关配置
          ********************************************************/
@@ -237,6 +239,9 @@ var EditConfigModel = /** @class */ (function () {
     __decorate([
         observable
     ], EditConfigModel.prototype, "edgeTextVertical", void 0);
+    __decorate([
+        observable
+    ], EditConfigModel.prototype, "anchorProximityValidate", void 0);
     __decorate([
         observable
     ], EditConfigModel.prototype, "hideAnchors", void 0);

package/es/model/GraphModel.d.ts

@@ -30,6 +30,7 @@ export declare class GraphModel {
     animation?: boolean | LFOptions.AnimationConfig;
     idGenerator?: (type?: string) => string | undefined;
     edgeGenerator: LFOptions.Definition['edgeGenerator'];
+    customTargetAnchor?: LFOptions.Definition['customTargetAnchor'];
     nodeModelMap: Map<string, BaseNodeModel>;
     edgeModelMap: Map<string, BaseEdgeModel>;
     elementsModelMap: Map<string, BaseNodeModel | BaseEdgeModel>;

package/es/model/GraphModel.js

@@ -96,7 +96,7 @@ var GraphModel = /** @class */ (function () {
         // 控制是否开启局部渲染
         this.partial = false;
         this.waitCleanEffects = [];
-        var container = options.container, partial = options.partial, _c = options.background, background = _c === void 0 ? {} : _c, grid = options.grid, idGenerator = options.idGenerator, edgeGenerator = options.edgeGenerator, animation = options.animation, customTrajectory = options.customTrajectory;
+        var container = options.container, partial = options.partial, _c = options.background, background = _c === void 0 ? {} : _c, grid = options.grid, idGenerator = options.idGenerator, edgeGenerator = options.edgeGenerator, animation = options.animation, customTrajectory = options.customTrajectory, customTargetAnchor = options.customTargetAnchor;
         this.rootEl = container;
         this.partial = !!partial;
         this.background = background;
@@ -151,6 +151,7 @@ var GraphModel = /** @class */ (function () {
         this.idGenerator = idGenerator;
         this.edgeGenerator = createEdgeGenerator(this, edgeGenerator);
         this.customTrajectory = customTrajectory;
+        this.customTargetAnchor = customTargetAnchor;
     }
     Object.defineProperty(GraphModel.prototype, "nodesMap", {
         get: function () {

package/es/model/node/BaseNodeModel.js

@@ -549,7 +549,9 @@ var BaseNodeModel = /** @class */ (function () {
      * 手动连接边到节点时，需要连接的锚点
      */
     BaseNodeModel.prototype.getTargetAnchor = function (position) {
-        return getClosestAnchor(position, this);
+        var _a;
+        var customTargetAnchor = this.graphModel.customTargetAnchor;
+        return ((_a = customTargetAnchor === null || customTargetAnchor === void 0 ? void 0 : customTargetAnchor(this, position)) !== null && _a !== void 0 ? _a : getClosestAnchor(position, this));
     };
     /**
      * 获取节点BBox

package/es/options.d.ts

@@ -1,4 +1,4 @@
-import type { TransformModel } from './model';
+import type { TransformModel, BaseNodeModel, Model } from './model';
 import { createElement as h } from 'preact/compat';
 import LogicFlow from './LogicFlow';
 import { KeyboardDef } from './keyboard';
@@ -21,6 +21,7 @@ export declare namespace Options {
         edge: boolean;
     };
     type EdgeGeneratorType = (sourceNode: LogicFlow.NodeData, targetNode: LogicFlow.NodeData, currentEdge?: Partial<LogicFlow.EdgeConfig>) => any;
+    type customTargetAnchorType = (nodeModel: BaseNodeModel, position: LogicFlow.Point) => Model.AnchorInfo | undefined;
     interface CustomAnchorLineProps {
         sourcePoint: LogicFlow.Point;
         targetPoint: LogicFlow.Point;
@@ -67,6 +68,7 @@ export declare namespace Options {
         disabledTools?: string[];
         idGenerator?: (type?: string) => string;
         edgeGenerator?: EdgeGeneratorType;
+        customTargetAnchor?: customTargetAnchorType;
         customTrajectory?: (props: CustomAnchorLineProps) => h.JSX.Element;
         themeMode?: 'radius' | 'dark' | 'colorful';
         parentTransform?: TransformModel;

package/es/util/drag.js

@@ -23,7 +23,6 @@ var StepDrag = /** @class */ (function () {
                 return;
             if (_this.isStopPropagation)
                 e.stopPropagation();
-            e.preventDefault();
             _this.isStartDragging = true;
             _this.startX = e.clientX;
             _this.startY = e.clientY;

package/es/view/Anchor.d.ts

@@ -40,6 +40,7 @@ declare class Anchor extends Component<IProps, IState> {
     };
     checkEnd: (event: PointerEvent | null | undefined) => import("../model").BaseEdgeModel<LogicFlow.PropertiesType> | null | undefined;
     moveAnchorEnd(endX: number, endY: number, event?: PointerEvent): void;
+    validateAndSetState(targetNode: BaseNodeModel, anchorId: string | undefined, targetAnchor: AnchorConfig, nodeModel: BaseNodeModel, anchorData: AnchorConfig): void;
     isShowLine(): boolean;
     render(): import("preact/compat").JSX.Element;
 }

package/es/view/Anchor.js

@@ -248,8 +248,7 @@ var Anchor = /** @class */ (function (_super) {
         configurable: true
     });
     Anchor.prototype.moveAnchorEnd = function (endX, endY, event) {
-        var _a, _b;
-        var _c = this.props, graphModel = _c.graphModel, nodeModel = _c.nodeModel, anchorData = _c.anchorData;
+        var _a = this.props, graphModel = _a.graphModel, nodeModel = _a.nodeModel, anchorData = _a.anchorData;
         var info = targetNodeInfo({
             x: endX,
             y: endY,
@@ -265,24 +264,12 @@ var Anchor = /** @class */ (function (_super) {
                 return;
             }
             this.preTargetNode = targetNode;
-            // 支持节点的每个锚点单独设置是否可连接，因此规则key去nodeId + anchorId作为唯一值
-            var targetInfoId = "".concat(nodeModel.id, "_").concat(targetNode.id, "_").concat(anchorId, "_").concat(anchorData.id);
-            // 查看鼠标是否进入过target，若有检验结果，表示进入过, 就不重复计算了。
-            if (!this.targetRuleResults.has(targetInfoId)) {
-                var targetAnchor = info.anchor;
-                var sourceRuleResult = nodeModel.isAllowConnectedAsSource(targetNode, anchorData, targetAnchor);
-                var targetRuleResult = targetNode.isAllowConnectedAsTarget(nodeModel, anchorData, targetAnchor);
-                this.sourceRuleResults.set(targetInfoId, formatAnchorConnectValidateData(sourceRuleResult));
-                this.targetRuleResults.set(targetInfoId, formatAnchorConnectValidateData(targetRuleResult));
-            }
-            var isSourcePass = ((_a = this.sourceRuleResults.get(targetInfoId)) !== null && _a !== void 0 ? _a : {}).isAllPass;
-            var isTargetPass = ((_b = this.targetRuleResults.get(targetInfoId)) !== null && _b !== void 0 ? _b : {}).isAllPass;
-            // 实时提示出即将链接的锚点
-            if (isSourcePass && isTargetPass) {
-                targetNode.setElementState(ElementState.ALLOW_CONNECT);
-            }
-            else {
-                targetNode.setElementState(ElementState.NOT_ALLOW_CONNECT);
+            var anchorDist = distance(endX, endY, info.anchor.x, info.anchor.y);
+            var validateDistance = 10;
+            var editConfigModel = graphModel.editConfigModel;
+            if (!editConfigModel.anchorProximityValidate ||
+                anchorDist <= validateDistance) {
+                this.validateAndSetState(targetNode, anchorId, info.anchor, nodeModel, anchorData);
             }
             // 人工触发进入目标节点事件，同步设置 hovered 以驱动锚点显隐和样式
             if (!targetNode.isHovered) {
@@ -312,6 +299,28 @@ var Anchor = /** @class */ (function (_super) {
             this.preTargetNode = undefined;
         }
     };
+    // 校验 source/target 连接规则并设置目标节点状态
+    Anchor.prototype.validateAndSetState = function (targetNode, anchorId, targetAnchor, nodeModel, anchorData) {
+        var _a, _b;
+        var targetInfoId = "".concat(nodeModel.id, "_").concat(targetNode.id, "_").concat(anchorId, "_").concat(anchorData.id);
+        if (!this.targetRuleResults.has(targetInfoId)) {
+            // 首次计算并缓存源/目标两侧的规则校验结果
+            var sourceRuleResult = nodeModel.isAllowConnectedAsSource(targetNode, anchorData, targetAnchor);
+            var targetRuleResult = targetNode.isAllowConnectedAsTarget(nodeModel, anchorData, targetAnchor);
+            this.sourceRuleResults.set(targetInfoId, formatAnchorConnectValidateData(sourceRuleResult));
+            this.targetRuleResults.set(targetInfoId, formatAnchorConnectValidateData(targetRuleResult));
+        }
+        // 读取缓存的校验结果
+        var isSourcePass = ((_a = this.sourceRuleResults.get(targetInfoId)) !== null && _a !== void 0 ? _a : {}).isAllPass;
+        var isTargetPass = ((_b = this.targetRuleResults.get(targetInfoId)) !== null && _b !== void 0 ? _b : {}).isAllPass;
+        // 两侧都通过则允许连接，否则标记为不允许连接
+        if (isSourcePass && isTargetPass) {
+            targetNode.setElementState(ElementState.ALLOW_CONNECT);
+        }
+        else {
+            targetNode.setElementState(ElementState.NOT_ALLOW_CONNECT);
+        }
+    };
     Anchor.prototype.isShowLine = function () {
         var _a = this.state, startX = _a.startX, startY = _a.startY, endX = _a.endX, endY = _a.endY;
         var v = distance(startX, startY, endX, endY);

package/lib/model/EditConfigModel.d.ts

@@ -115,6 +115,7 @@ export interface IEditConfigType {
     edgeTextMode: TextMode;
     snapGrid: boolean;
     isPinching: boolean;
+    anchorProximityValidate: boolean;
 }
 export type IConfigKeys = keyof IEditConfigType;
 /**
@@ -147,6 +148,7 @@ export declare class EditConfigModel {
     edgeTextDraggable: boolean;
     edgeTextMultiple: boolean;
     edgeTextVertical: boolean;
+    anchorProximityValidate: boolean;
     /*********************************************************
      * 节点相关配置
      ********************************************************/
@@ -172,7 +174,7 @@ export declare class EditConfigModel {
     multipleSelectKey: string;
     constructor(config: Partial<IEditConfigType>);
     updateEditConfig(config: Partial<IEditConfigType>): void;
-    computeConfig(config: Partial<IEditConfigType>): Partial<IEditConfigType> & Pick<Partial<IEditConfigType>, "textMode" | "adjustEdgeStartAndEnd" | "edgeTextDraggable" | "edgeTextEdit" | "nodeTextDraggable" | "nodeTextEdit" | "adjustEdge" | "edgeTextMode" | "nodeTextMode" | "allowRotate" | "allowResize" | "isSilentMode" | "stopScrollGraph" | "stopZoomGraph" | "stopMoveGraph" | "textEdit" | "snapGrid" | "adjustEdgeMiddle" | "adjustEdgeStart" | "adjustEdgeEnd" | "adjustNodePosition" | "hideAnchors" | "autoExpand" | "hoverOutline" | "nodeSelectedOutline" | "edgeSelectedOutline" | "textDraggable" | "multipleSelectKey" | "nodeTextMultiple" | "edgeTextMultiple" | "nodeTextVertical" | "edgeTextVertical" | "isPinching">;
+    computeConfig(config: Partial<IEditConfigType>): Partial<IEditConfigType> & Pick<Partial<IEditConfigType>, "textMode" | "adjustEdgeStartAndEnd" | "edgeTextDraggable" | "edgeTextEdit" | "nodeTextDraggable" | "nodeTextEdit" | "adjustEdge" | "edgeTextMode" | "nodeTextMode" | "allowRotate" | "allowResize" | "isSilentMode" | "stopScrollGraph" | "stopZoomGraph" | "stopMoveGraph" | "textEdit" | "snapGrid" | "adjustEdgeMiddle" | "adjustEdgeStart" | "adjustEdgeEnd" | "adjustNodePosition" | "hideAnchors" | "autoExpand" | "hoverOutline" | "nodeSelectedOutline" | "edgeSelectedOutline" | "textDraggable" | "multipleSelectKey" | "nodeTextMultiple" | "edgeTextMultiple" | "nodeTextVertical" | "edgeTextVertical" | "isPinching" | "anchorProximityValidate">;
     updateTextMode(textMode: TextMode): void;
     getConfig(): IEditConfigType;
 }

package/lib/model/EditConfigModel.js

@@ -66,6 +66,7 @@ var allKeys = [
     'nodeTextVertical', // 节点文本是否纵向显示
     'edgeTextVertical', // 边文本是否纵向显示
     'isPinching', //是否是双指捏合态
+    'anchorProximityValidate', // 仅在靠近锚点时触发连接校验
 ];
 /**
  * 页面编辑配置
@@ -99,6 +100,7 @@ var EditConfigModel = /** @class */ (function () {
         this.edgeTextDraggable = false;
         this.edgeTextMultiple = false; // 是否支持多个边文本
         this.edgeTextVertical = false; // 边文本朝向是否是纵向
+        this.anchorProximityValidate = false; // 仅在靠近锚点时触发连接校验
         /*********************************************************
          * 节点相关配置
          ********************************************************/
@@ -240,6 +242,9 @@ var EditConfigModel = /** @class */ (function () {
     __decorate([
         mobx_1.observable
     ], EditConfigModel.prototype, "edgeTextVertical", void 0);
+    __decorate([
+        mobx_1.observable
+    ], EditConfigModel.prototype, "anchorProximityValidate", void 0);
     __decorate([
         mobx_1.observable
     ], EditConfigModel.prototype, "hideAnchors", void 0);

package/lib/model/GraphModel.d.ts

@@ -30,6 +30,7 @@ export declare class GraphModel {
     animation?: boolean | LFOptions.AnimationConfig;
     idGenerator?: (type?: string) => string | undefined;
     edgeGenerator: LFOptions.Definition['edgeGenerator'];
+    customTargetAnchor?: LFOptions.Definition['customTargetAnchor'];
     nodeModelMap: Map<string, BaseNodeModel>;
     edgeModelMap: Map<string, BaseEdgeModel>;
     elementsModelMap: Map<string, BaseNodeModel | BaseEdgeModel>;

package/lib/model/GraphModel.js

@@ -102,7 +102,7 @@ var GraphModel = /** @class */ (function () {
         // 控制是否开启局部渲染
         this.partial = false;
         this.waitCleanEffects = [];
-        var container = options.container, partial = options.partial, _c = options.background, background = _c === void 0 ? {} : _c, grid = options.grid, idGenerator = options.idGenerator, edgeGenerator = options.edgeGenerator, animation = options.animation, customTrajectory = options.customTrajectory;
+        var container = options.container, partial = options.partial, _c = options.background, background = _c === void 0 ? {} : _c, grid = options.grid, idGenerator = options.idGenerator, edgeGenerator = options.edgeGenerator, animation = options.animation, customTrajectory = options.customTrajectory, customTargetAnchor = options.customTargetAnchor;
         this.rootEl = container;
         this.partial = !!partial;
         this.background = background;
@@ -157,6 +157,7 @@ var GraphModel = /** @class */ (function () {
         this.idGenerator = idGenerator;
         this.edgeGenerator = (0, util_1.createEdgeGenerator)(this, edgeGenerator);
         this.customTrajectory = customTrajectory;
+        this.customTargetAnchor = customTargetAnchor;
     }
     Object.defineProperty(GraphModel.prototype, "nodesMap", {
         get: function () {

package/lib/model/node/BaseNodeModel.js

@@ -552,7 +552,9 @@ var BaseNodeModel = /** @class */ (function () {
      * 手动连接边到节点时，需要连接的锚点
      */
     BaseNodeModel.prototype.getTargetAnchor = function (position) {
-        return (0, util_1.getClosestAnchor)(position, this);
+        var _a;
+        var customTargetAnchor = this.graphModel.customTargetAnchor;
+        return ((_a = customTargetAnchor === null || customTargetAnchor === void 0 ? void 0 : customTargetAnchor(this, position)) !== null && _a !== void 0 ? _a : (0, util_1.getClosestAnchor)(position, this));
     };
     /**
      * 获取节点BBox

package/lib/options.d.ts

@@ -1,4 +1,4 @@
-import type { TransformModel } from './model';
+import type { TransformModel, BaseNodeModel, Model } from './model';
 import { createElement as h } from 'preact/compat';
 import LogicFlow from './LogicFlow';
 import { KeyboardDef } from './keyboard';
@@ -21,6 +21,7 @@ export declare namespace Options {
         edge: boolean;
     };
     type EdgeGeneratorType = (sourceNode: LogicFlow.NodeData, targetNode: LogicFlow.NodeData, currentEdge?: Partial<LogicFlow.EdgeConfig>) => any;
+    type customTargetAnchorType = (nodeModel: BaseNodeModel, position: LogicFlow.Point) => Model.AnchorInfo | undefined;
     interface CustomAnchorLineProps {
         sourcePoint: LogicFlow.Point;
         targetPoint: LogicFlow.Point;
@@ -67,6 +68,7 @@ export declare namespace Options {
         disabledTools?: string[];
         idGenerator?: (type?: string) => string;
         edgeGenerator?: EdgeGeneratorType;
+        customTargetAnchor?: customTargetAnchorType;
         customTrajectory?: (props: CustomAnchorLineProps) => h.JSX.Element;
         themeMode?: 'radius' | 'dark' | 'colorful';
         parentTransform?: TransformModel;

package/lib/util/drag.js

@@ -26,7 +26,6 @@ var StepDrag = /** @class */ (function () {
                 return;
             if (_this.isStopPropagation)
                 e.stopPropagation();
-            e.preventDefault();
             _this.isStartDragging = true;
             _this.startX = e.clientX;
             _this.startY = e.clientY;

package/lib/view/Anchor.d.ts

@@ -40,6 +40,7 @@ declare class Anchor extends Component<IProps, IState> {
     };
     checkEnd: (event: PointerEvent | null | undefined) => import("../model").BaseEdgeModel<LogicFlow.PropertiesType> | null | undefined;
     moveAnchorEnd(endX: number, endY: number, event?: PointerEvent): void;
+    validateAndSetState(targetNode: BaseNodeModel, anchorId: string | undefined, targetAnchor: AnchorConfig, nodeModel: BaseNodeModel, anchorData: AnchorConfig): void;
     isShowLine(): boolean;
     render(): import("preact/compat").JSX.Element;
 }

package/lib/view/Anchor.js

@@ -250,8 +250,7 @@ var Anchor = /** @class */ (function (_super) {
         configurable: true
     });
     Anchor.prototype.moveAnchorEnd = function (endX, endY, event) {
-        var _a, _b;
-        var _c = this.props, graphModel = _c.graphModel, nodeModel = _c.nodeModel, anchorData = _c.anchorData;
+        var _a = this.props, graphModel = _a.graphModel, nodeModel = _a.nodeModel, anchorData = _a.anchorData;
         var info = (0, util_1.targetNodeInfo)({
             x: endX,
             y: endY,
@@ -267,24 +266,12 @@ var Anchor = /** @class */ (function (_super) {
                 return;
             }
             this.preTargetNode = targetNode;
-            // 支持节点的每个锚点单独设置是否可连接，因此规则key去nodeId + anchorId作为唯一值
-            var targetInfoId = "".concat(nodeModel.id, "_").concat(targetNode.id, "_").concat(anchorId, "_").concat(anchorData.id);
-            // 查看鼠标是否进入过target，若有检验结果，表示进入过, 就不重复计算了。
-            if (!this.targetRuleResults.has(targetInfoId)) {
-                var targetAnchor = info.anchor;
-                var sourceRuleResult = nodeModel.isAllowConnectedAsSource(targetNode, anchorData, targetAnchor);
-                var targetRuleResult = targetNode.isAllowConnectedAsTarget(nodeModel, anchorData, targetAnchor);
-                this.sourceRuleResults.set(targetInfoId, (0, util_1.formatAnchorConnectValidateData)(sourceRuleResult));
-                this.targetRuleResults.set(targetInfoId, (0, util_1.formatAnchorConnectValidateData)(targetRuleResult));
-            }
-            var isSourcePass = ((_a = this.sourceRuleResults.get(targetInfoId)) !== null && _a !== void 0 ? _a : {}).isAllPass;
-            var isTargetPass = ((_b = this.targetRuleResults.get(targetInfoId)) !== null && _b !== void 0 ? _b : {}).isAllPass;
-            // 实时提示出即将链接的锚点
-            if (isSourcePass && isTargetPass) {
-                targetNode.setElementState(constant_1.ElementState.ALLOW_CONNECT);
-            }
-            else {
-                targetNode.setElementState(constant_1.ElementState.NOT_ALLOW_CONNECT);
+            var anchorDist = (0, util_1.distance)(endX, endY, info.anchor.x, info.anchor.y);
+            var validateDistance = 10;
+            var editConfigModel = graphModel.editConfigModel;
+            if (!editConfigModel.anchorProximityValidate ||
+                anchorDist <= validateDistance) {
+                this.validateAndSetState(targetNode, anchorId, info.anchor, nodeModel, anchorData);
             }
             // 人工触发进入目标节点事件，同步设置 hovered 以驱动锚点显隐和样式
             if (!targetNode.isHovered) {
@@ -314,6 +301,28 @@ var Anchor = /** @class */ (function (_super) {
             this.preTargetNode = undefined;
         }
     };
+    // 校验 source/target 连接规则并设置目标节点状态
+    Anchor.prototype.validateAndSetState = function (targetNode, anchorId, targetAnchor, nodeModel, anchorData) {
+        var _a, _b;
+        var targetInfoId = "".concat(nodeModel.id, "_").concat(targetNode.id, "_").concat(anchorId, "_").concat(anchorData.id);
+        if (!this.targetRuleResults.has(targetInfoId)) {
+            // 首次计算并缓存源/目标两侧的规则校验结果
+            var sourceRuleResult = nodeModel.isAllowConnectedAsSource(targetNode, anchorData, targetAnchor);
+            var targetRuleResult = targetNode.isAllowConnectedAsTarget(nodeModel, anchorData, targetAnchor);
+            this.sourceRuleResults.set(targetInfoId, (0, util_1.formatAnchorConnectValidateData)(sourceRuleResult));
+            this.targetRuleResults.set(targetInfoId, (0, util_1.formatAnchorConnectValidateData)(targetRuleResult));
+        }
+        // 读取缓存的校验结果
+        var isSourcePass = ((_a = this.sourceRuleResults.get(targetInfoId)) !== null && _a !== void 0 ? _a : {}).isAllPass;
+        var isTargetPass = ((_b = this.targetRuleResults.get(targetInfoId)) !== null && _b !== void 0 ? _b : {}).isAllPass;
+        // 两侧都通过则允许连接，否则标记为不允许连接
+        if (isSourcePass && isTargetPass) {
+            targetNode.setElementState(constant_1.ElementState.ALLOW_CONNECT);
+        }
+        else {
+            targetNode.setElementState(constant_1.ElementState.NOT_ALLOW_CONNECT);
+        }
+    };
     Anchor.prototype.isShowLine = function () {
         var _a = this.state, startX = _a.startX, startY = _a.startY, endX = _a.endX, endY = _a.endY;
         var v = (0, util_1.distance)(startX, startY, endX, endY);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logicflow/core",
-  "version": "2.2.0-alpha.0",
+  "version": "2.2.0-alpha.2",
   "description": "LogicFlow, help you quickly create flowcharts",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/model/EditConfigModel.ts

@@ -126,6 +126,7 @@ export interface IEditConfigType {
   // 开启网格对齐
   snapGrid: boolean
   isPinching: boolean
+  anchorProximityValidate: boolean
 }
 
 export type IConfigKeys = keyof IEditConfigType
@@ -188,6 +189,7 @@ const allKeys = [
   'nodeTextVertical', // 节点文本是否纵向显示
   'edgeTextVertical', // 边文本是否纵向显示
   'isPinching', //是否是双指捏合态
+  'anchorProximityValidate', // 仅在靠近锚点时触发连接校验
 ] as const
 
 /**
@@ -223,6 +225,7 @@ export class EditConfigModel {
   @observable edgeTextDraggable = false
   @observable edgeTextMultiple = false // 是否支持多个边文本
   @observable edgeTextVertical = false // 边文本朝向是否是纵向
+  @observable anchorProximityValidate = false // 仅在靠近锚点时触发连接校验
   /*********************************************************
    * 节点相关配置
    ********************************************************/

package/src/model/GraphModel.ts

@@ -89,6 +89,8 @@ export class GraphModel {
   idGenerator?: (type?: string) => string | undefined
   // 节点间连线、连线变更时的边的生成规则
   edgeGenerator: LFOptions.Definition['edgeGenerator']
+  // 自定义目标锚点连接规则
+  customTargetAnchor?: LFOptions.Definition['customTargetAnchor']
 
   // Remind：用于记录当前画布上所有节点和边的 model 的 Map
   // 现在的处理方式，用 this.nodes.map 生成的方式，如果在 new Model 的过程中依赖于其它节点的 model，会出现找不到的情况
@@ -163,6 +165,7 @@ export class GraphModel {
       edgeGenerator,
       animation,
       customTrajectory,
+      customTargetAnchor,
     } = options
     this.rootEl = container
     this.partial = !!partial
@@ -216,6 +219,7 @@ export class GraphModel {
     this.idGenerator = idGenerator
     this.edgeGenerator = createEdgeGenerator(this, edgeGenerator)
     this.customTrajectory = customTrajectory
+    this.customTargetAnchor = customTargetAnchor
   }
 
   @computed get nodesMap(): GraphModel.NodesMapType {

package/src/model/node/BaseNodeModel.ts

@@ -635,7 +635,10 @@ export class BaseNodeModel<P extends PropertiesType = PropertiesType>
    * 手动连接边到节点时，需要连接的锚点
    */
   public getTargetAnchor(position: Point): Model.AnchorInfo {
-    return getClosestAnchor(position, this)
+    const { customTargetAnchor } = this.graphModel
+    return (
+      customTargetAnchor?.(this, position) ?? getClosestAnchor(position, this)
+    )
   }
 
   /**

package/src/options.ts

@@ -1,4 +1,4 @@
-import type { TransformModel } from './model'
+import type { TransformModel, BaseNodeModel, Model } from './model'
 
 import { assign } from 'lodash-es'
 import { createElement as h } from 'preact/compat'
@@ -41,6 +41,10 @@ export namespace Options {
     currentEdge?: Partial<LogicFlow.EdgeConfig>,
   ) => any
 
+  export type customTargetAnchorType = (
+    nodeModel: BaseNodeModel,
+    position: LogicFlow.Point,
+  ) => Model.AnchorInfo | undefined
   export interface CustomAnchorLineProps {
     sourcePoint: LogicFlow.Point
     targetPoint: LogicFlow.Point
@@ -104,6 +108,7 @@ export namespace Options {
     idGenerator?: (type?: string) => string
     edgeGenerator?: EdgeGeneratorType
 
+    customTargetAnchor?: customTargetAnchorType
     customTrajectory?: (props: CustomAnchorLineProps) => h.JSX.Element
     themeMode?: 'radius' | 'dark' | 'colorful' // 主题模式
 

package/src/util/drag.ts

@@ -103,7 +103,6 @@ export class StepDrag {
     const DOC: any = window?.document
     if (e.button !== LEFT_MOUSE_BUTTON_CODE) return
     if (this.isStopPropagation) e.stopPropagation()
-    e.preventDefault()
     this.isStartDragging = true
     this.startX = e.clientX
     this.startY = e.clientY

package/src/view/Anchor.tsx

@@ -314,41 +314,21 @@ class Anchor extends Component<IProps, IState> {
         return
       }
       this.preTargetNode = targetNode
-      // 支持节点的每个锚点单独设置是否可连接，因此规则key去nodeId + anchorId作为唯一值
-      const targetInfoId = `${nodeModel.id}_${targetNode.id}_${anchorId}_${anchorData.id}`
-
-      // 查看鼠标是否进入过target，若有检验结果，表示进入过, 就不重复计算了。
-      if (!this.targetRuleResults.has(targetInfoId)) {
-        const targetAnchor = info.anchor
-        const sourceRuleResult = nodeModel.isAllowConnectedAsSource(
+      const anchorDist = distance(endX, endY, info.anchor.x, info.anchor.y)
+      const validateDistance = 10
+      const { editConfigModel } = graphModel
+      if (
+        !editConfigModel.anchorProximityValidate ||
+        anchorDist <= validateDistance
+      ) {
+        this.validateAndSetState(
           targetNode,
-          anchorData,
-          targetAnchor,
-        )
-        const targetRuleResult = targetNode.isAllowConnectedAsTarget(
+          anchorId,
+          info.anchor,
           nodeModel,
           anchorData,
-          targetAnchor,
-        )
-        this.sourceRuleResults.set(
-          targetInfoId,
-          formatAnchorConnectValidateData(sourceRuleResult),
-        )
-        this.targetRuleResults.set(
-          targetInfoId,
-          formatAnchorConnectValidateData(targetRuleResult),
         )
       }
-      const { isAllPass: isSourcePass } =
-        this.sourceRuleResults.get(targetInfoId) ?? {}
-      const { isAllPass: isTargetPass } =
-        this.targetRuleResults.get(targetInfoId) ?? {}
-      // 实时提示出即将链接的锚点
-      if (isSourcePass && isTargetPass) {
-        targetNode.setElementState(ElementState.ALLOW_CONNECT)
-      } else {
-        targetNode.setElementState(ElementState.NOT_ALLOW_CONNECT)
-      }
       // 人工触发进入目标节点事件，同步设置 hovered 以驱动锚点显隐和样式
       if (!targetNode.isHovered) {
         const nodeData = targetNode.getData()
@@ -379,6 +359,49 @@ class Anchor extends Component<IProps, IState> {
     }
   }
 
+  // 校验 source/target 连接规则并设置目标节点状态
+  validateAndSetState(
+    targetNode: BaseNodeModel,
+    anchorId: string | undefined,
+    targetAnchor: AnchorConfig,
+    nodeModel: BaseNodeModel,
+    anchorData: AnchorConfig,
+  ) {
+    const targetInfoId = `${nodeModel.id}_${targetNode.id}_${anchorId}_${anchorData.id}`
+    if (!this.targetRuleResults.has(targetInfoId)) {
+      // 首次计算并缓存源/目标两侧的规则校验结果
+      const sourceRuleResult = nodeModel.isAllowConnectedAsSource(
+        targetNode,
+        anchorData,
+        targetAnchor,
+      )
+      const targetRuleResult = targetNode.isAllowConnectedAsTarget(
+        nodeModel,
+        anchorData,
+        targetAnchor,
+      )
+      this.sourceRuleResults.set(
+        targetInfoId,
+        formatAnchorConnectValidateData(sourceRuleResult),
+      )
+      this.targetRuleResults.set(
+        targetInfoId,
+        formatAnchorConnectValidateData(targetRuleResult),
+      )
+    }
+    // 读取缓存的校验结果
+    const { isAllPass: isSourcePass } =
+      this.sourceRuleResults.get(targetInfoId) ?? {}
+    const { isAllPass: isTargetPass } =
+      this.targetRuleResults.get(targetInfoId) ?? {}
+    // 两侧都通过则允许连接，否则标记为不允许连接
+    if (isSourcePass && isTargetPass) {
+      targetNode.setElementState(ElementState.ALLOW_CONNECT)
+    } else {
+      targetNode.setElementState(ElementState.NOT_ALLOW_CONNECT)
+    }
+  }
+
   isShowLine() {
     const { startX, startY, endX, endY } = this.state
     const v = distance(startX, startY, endX, endY)