@logicflow/core 2.1.4 → 2.2.0-alpha.1

package/es/view/node/BaseNode.js

@@ -168,6 +168,10 @@ var BaseNode = /** @class */ (function (_super) {
         _this.handleMouseUp = function () {
             var model = _this.props.model;
             _this.mouseUpDrag = model.isDragging;
+            if (_this.longPressTimer) {
+                clearTimeout(_this.longPressTimer);
+                _this.longPressTimer = undefined;
+            }
         };
         _this.handleClick = function (e) {
             // 节点拖拽进画布之后，不触发click事件相关emit
@@ -268,6 +272,16 @@ var BaseNode = /** @class */ (function (_super) {
             if (editConfigModel.adjustNodePosition && model.draggable) {
                 _this.stepDrag && _this.stepDrag.handleMouseDown(ev);
             }
+            if (_this.longPressTimer) {
+                clearTimeout(_this.longPressTimer);
+            }
+            if (ev.pointerType === 'touch') {
+                _this.longPressTimer = window.setTimeout(function () {
+                    if (!_this.props.model.isDragging) {
+                        _this.handleContextMenu(ev);
+                    }
+                }, 500);
+            }
         };
         _this.handleFocus = function () {
             var _a = _this.props, model = _a.model, graphModel = _a.graphModel;
@@ -449,7 +463,9 @@ var BaseNode = /** @class */ (function (_super) {
             if (adjustNodePosition && draggable) {
                 this.stepDrag.setStep(gridSize * SCALE_X);
             }
-            nodeShape = (_jsx("g", __assign({ className: "".concat(this.getStateClassName(), " ").concat(className), onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp, onClick: this.handleClick, onMouseEnter: this.setHoverOn, onMouseOver: this.setHoverOn, onMouseLeave: this.setHoverOff, onMouseOut: this.onMouseOut, onContextMenu: this.handleContextMenu, onFocus: this.handleFocus, onBlur: this.handleBlur }, restAttributes, { children: nodeShapeInner })));
+            nodeShape = (_jsx("g", __assign({ className: "".concat(this.getStateClassName(), " ").concat(className), onPointerDown: this.handleMouseDown, onPointerUp: this.handleMouseUp, onClick: this.handleClick, 
+                //因为移动端点击操作完成会按顺序触发enter、leave、click事件，所以会造成节点的闪烁，所以在这里没有统一状态为Pointer
+                onMouseEnter: this.setHoverOn, onMouseOver: this.setHoverOn, onMouseLeave: this.setHoverOff, onMouseOut: this.onMouseOut, onContextMenu: this.handleContextMenu, onFocus: this.handleFocus, onBlur: this.handleBlur }, restAttributes, { children: nodeShapeInner })));
         }
         return nodeShape;
     };

package/es/view/overlay/BezierAdjustOverlay.js

@@ -88,7 +88,7 @@ var BezierAdjustAnchor = /** @class */ (function (_super) {
         var x = position.x, y = position.y;
         var bezierModel = this.props.bezierModel;
         var adjustAnchor = bezierModel.getEdgeStyle().adjustAnchor;
-        return (_jsx(Circle, __assign({ className: "lf-bezier-adjust-anchor", x: x, y: y }, adjustAnchor, { onMouseDown: function (ev) {
+        return (_jsx(Circle, __assign({ className: "lf-bezier-adjust-anchor", x: x, y: y }, adjustAnchor, { onPointerDown: function (ev) {
                 // if (edgeAddable !== false) {
                 _this.dragHandler.handleMouseDown(ev);
                 // }

package/es/view/overlay/CanvasOverlay.d.ts

@@ -13,13 +13,24 @@ export declare class CanvasOverlay extends Component<IProps, IState> {
     stepDrag: StepDrag;
     stepScrollX: number;
     stepScrollY: number;
+    pointers: Map<number, {
+        x: number;
+        y: number;
+    }>;
+    pinchStartDistance?: number;
+    pinchStartScale?: number;
+    pinchLastCenterX?: number;
+    pinchLastCenterY?: number;
+    longPressTimer?: number;
     constructor(props: IProps);
     onDragging: ({ deltaX, deltaY }: IDragParams) => void;
     onDragEnd: () => void;
     zoomHandler: (ev: WheelEvent) => void;
     clickHandler: (ev: MouseEvent) => void;
     handleContextMenu: (ev: MouseEvent) => void;
-    mouseDownHandler: (ev: MouseEvent) => void;
+    pointerDownHandler: (ev: PointerEvent) => void;
+    pointerMoveHandler: (ev: PointerEvent) => void;
+    pointerUpHandler: (ev: PointerEvent) => void;
     render(): import("preact/compat").JSX.Element;
 }
 export default CanvasOverlay;

package/es/view/overlay/CanvasOverlay.js

@@ -13,17 +13,6 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -41,11 +30,16 @@ var CanvasOverlay = /** @class */ (function (_super) {
         var _this = _super.call(this) || this;
         _this.stepScrollX = 0;
         _this.stepScrollY = 0;
+        _this.pointers = new Map();
         // get InjectedProps() {
         //   return this.props as InjectedProps;
         // }
         _this.onDragging = function (_a) {
             var deltaX = _a.deltaX, deltaY = _a.deltaY;
+            if (_this.longPressTimer) {
+                clearTimeout(_this.longPressTimer);
+                _this.longPressTimer = undefined;
+            }
             _this.setState({
                 isDragging: true,
             });
@@ -123,8 +117,36 @@ var CanvasOverlay = /** @class */ (function (_super) {
             }
         };
         // 鼠标、触摸板 按下
-        _this.mouseDownHandler = function (ev) {
+        _this.pointerDownHandler = function (ev) {
             var _a = _this.props.graphModel, eventCenter = _a.eventCenter, editConfigModel = _a.editConfigModel, SCALE_X = _a.transformModel.SCALE_X, gridSize = _a.gridSize;
+            _this.pointers.set(ev.pointerId, { x: ev.clientX, y: ev.clientY });
+            if (_this.longPressTimer) {
+                clearTimeout(_this.longPressTimer);
+            }
+            if (ev.pointerType === 'touch') {
+                _this.longPressTimer = window.setTimeout(function () {
+                    _this.handleContextMenu(ev);
+                }, 500);
+            }
+            // 检测双指触摸，初始化捏合缩放
+            if (_this.pointers.size === 2) {
+                var _b = _this.props.graphModel, transformModel = _b.transformModel, editConfigModel_1 = _b.editConfigModel;
+                // 记录两指当前位置用于计算初始距离
+                var pts = Array.from(_this.pointers.values());
+                var dx = pts[0].x - pts[1].x;
+                var dy = pts[0].y - pts[1].y;
+                var cx = (pts[0].x + pts[1].x) / 2;
+                var cy = (pts[0].y + pts[1].y) / 2;
+                // 记录捏合起始距离与当前缩放，后续按比例计算缩放
+                _this.pinchStartDistance = Math.hypot(dx, dy);
+                _this.pinchStartScale = transformModel.SCALE_X;
+                // 双指操作下取消画布拖拽，避免与捏合缩放冲突
+                _this.stepDrag.cancelDrag();
+                _this.pinchLastCenterX = cx;
+                _this.pinchLastCenterY = cy;
+                editConfigModel_1.updateEditConfig({ isPinching: true });
+                return;
+            }
             var adjustEdge = editConfigModel.adjustEdge, adjustNodePosition = editConfigModel.adjustNodePosition, stopMoveGraph = editConfigModel.stopMoveGraph;
             var target = ev.target;
             var isFrozenElement = !adjustEdge && !adjustNodePosition;
@@ -140,6 +162,63 @@ var CanvasOverlay = /** @class */ (function (_super) {
                 _this.clickHandler(ev);
             }
         };
+        _this.pointerMoveHandler = function (ev) {
+            var _a;
+            // 记录当前指针位置（按 pointerId）
+            _this.pointers.set(ev.pointerId, { x: ev.clientX, y: ev.clientY });
+            // 当已记录初始捏合距离且存在两指时，执行捏合缩放
+            if (_this.pinchStartDistance && _this.pointers.size >= 2) {
+                var _b = _this.props, graphModel = _b.graphModel, _c = _b.graphModel, editConfigModel = _c.editConfigModel, transformModel = _c.transformModel;
+                if (editConfigModel.stopZoomGraph)
+                    return;
+                // 取消触摸长按计时，避免捏合过程中误触发上下文菜单
+                if (_this.longPressTimer) {
+                    clearTimeout(_this.longPressTimer);
+                }
+                // 计算两指间当前距离
+                var pts = Array.from(_this.pointers.values());
+                var dx = pts[0].x - pts[1].x;
+                var dy = pts[0].y - pts[1].y;
+                var dist = Math.hypot(dx, dy);
+                // 以初始缩放为基准，根据距离比例得到新的缩放比例
+                var scale = ((_a = _this.pinchStartScale) !== null && _a !== void 0 ? _a : transformModel.SCALE_X) *
+                    (dist / _this.pinchStartDistance);
+                // 取两指中心作为缩放原点，并转换为画布坐标系
+                var cx = (pts[0].x + pts[1].x) / 2;
+                var cy = (pts[0].y + pts[1].y) / 2;
+                var pos = graphModel.getPointByClient({ x: cx, y: cy });
+                var _d = pos.canvasOverlayPosition, x = _d.x, y = _d.y;
+                transformModel.zoom(scale, [x, y]);
+                // 双指中心位移驱动画布平移，配合缩放实现捏合移动；
+                if (!editConfigModel.stopMoveGraph || editConfigModel.isPinching) {
+                    var deltaX = _this.pinchLastCenterX === undefined ? 0 : cx - _this.pinchLastCenterX;
+                    var deltaY = _this.pinchLastCenterY === undefined ? 0 : cy - _this.pinchLastCenterY;
+                    transformModel.translate(deltaX, deltaY);
+                    _this.pinchLastCenterX = cx;
+                    _this.pinchLastCenterY = cy;
+                }
+                ev.preventDefault();
+            }
+        };
+        _this.pointerUpHandler = function (ev) {
+            _this.pointers.delete(ev.pointerId);
+            if (_this.longPressTimer) {
+                clearTimeout(_this.longPressTimer);
+                _this.longPressTimer = undefined;
+            }
+            // 双指松开或仅剩一指：结束捏合手势并清理临时状态
+            if (_this.pointers.size < 2) {
+                // 清空捏合距离与缩放起始值
+                _this.pinchStartDistance = undefined;
+                _this.pinchStartScale = undefined;
+                // 清空上一帧的双指中心
+                _this.pinchLastCenterX = undefined;
+                _this.pinchLastCenterY = undefined;
+                var editConfigModel = _this.props.graphModel.editConfigModel;
+                // 标记退出捏合，框选等交互可恢复
+                editConfigModel.updateEditConfig({ isPinching: false });
+            }
+        };
         var _a = props.graphModel, gridSize = _a.gridSize, eventCenter = _a.eventCenter;
         _this.stepDrag = new StepDrag({
             onDragging: _this.onDragging,
@@ -159,11 +238,11 @@ var CanvasOverlay = /** @class */ (function (_super) {
     CanvasOverlay.prototype.render = function () {
         var transformModel = this.props.graphModel.transformModel;
         var transform = transformModel.getTransformStyle().transform;
-        var _a = this.props, children = _a.children, dnd = _a.dnd;
+        var children = this.props.children;
         var isDragging = this.state.isDragging;
-        return (_jsx("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", name: "canvas-overlay", onWheel: this.zoomHandler, onMouseDown: this.mouseDownHandler, onContextMenu: this.handleContextMenu, className: isDragging
+        return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", name: "canvas-overlay", onWheel: this.zoomHandler, onPointerDown: this.pointerDownHandler, onPointerMove: this.pointerMoveHandler, onPointerUp: this.pointerUpHandler, onPointerCancel: this.pointerUpHandler, onContextMenu: this.handleContextMenu, style: { touchAction: 'none', WebkitUserSelect: 'none' }, className: isDragging
                 ? 'lf-canvas-overlay lf-dragging'
-                : 'lf-canvas-overlay lf-drag-able' }, dnd.eventMap(), { children: _jsx("g", { transform: transform, children: children }) })));
+                : 'lf-canvas-overlay lf-drag-able', children: _jsx("g", { transform: transform, children: children }) }));
     };
     CanvasOverlay = __decorate([
         observer

package/es/view/text/BaseText.d.ts

@@ -14,7 +14,7 @@ export declare class BaseText<P extends IBaseTextProps, S extends IBaseTextState
     stepperDrag: StepDrag;
     constructor(props: P);
     getShape(): h.JSX.Element | null;
-    mouseDownHandler: (e: MouseEvent) => void;
+    mouseDownHandler: (e: PointerEvent) => void;
     onDragging: ({ deltaX, deltaY }: IDragParams) => void;
     dbClickHandler: () => void;
     render(): h.JSX.Element | undefined;

package/es/view/text/BaseText.js

@@ -119,7 +119,7 @@ var BaseText = /** @class */ (function (_super) {
     BaseText.prototype.render = function () {
         var text = this.props.model.text;
         if (text) {
-            return (_jsx("g", { onMouseDown: this.mouseDownHandler, onDblClick: this.dbClickHandler, children: this.getShape() }));
+            return (_jsx("g", { onPointerDown: this.mouseDownHandler, onDblClick: this.dbClickHandler, children: this.getShape() }));
         }
     };
     return BaseText;

package/lib/model/EditConfigModel.d.ts

@@ -114,6 +114,8 @@ export interface IEditConfigType {
     nodeTextMode: TextMode;
     edgeTextMode: TextMode;
     snapGrid: boolean;
+    isPinching: boolean;
+    anchorProximityValidate: boolean;
 }
 export type IConfigKeys = keyof IEditConfigType;
 /**
@@ -129,6 +131,7 @@ export declare class EditConfigModel {
     stopMoveGraph: boolean;
     stopScrollGraph: boolean;
     snapGrid: boolean;
+    isPinching: boolean;
     /*********************************************************
      * 文本相关配置（全局）
      ********************************************************/
@@ -145,6 +148,7 @@ export declare class EditConfigModel {
     edgeTextDraggable: boolean;
     edgeTextMultiple: boolean;
     edgeTextVertical: boolean;
+    anchorProximityValidate: boolean;
     /*********************************************************
      * 节点相关配置
      ********************************************************/
@@ -170,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" | "adjustNodePosition" | "hoverOutline" | "nodeSelectedOutline" | "edgeSelectedOutline" | "adjustEdgeMiddle" | "adjustEdgeStart" | "adjustEdgeEnd" | "hideAnchors" | "autoExpand" | "textDraggable" | "multipleSelectKey" | "nodeTextMultiple" | "edgeTextMultiple" | "nodeTextVertical" | "edgeTextVertical">;
+    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

@@ -65,6 +65,8 @@ var allKeys = [
     'edgeTextMultiple', // 是否支持多个边文本
     'nodeTextVertical', // 节点文本是否纵向显示
     'edgeTextVertical', // 边文本是否纵向显示
+    'isPinching', //是否是双指捏合态
+    'anchorProximityValidate', // 仅在靠近锚点时触发连接校验
 ];
 /**
  * 页面编辑配置
@@ -79,6 +81,7 @@ var EditConfigModel = /** @class */ (function () {
         this.stopMoveGraph = false;
         this.stopScrollGraph = false;
         this.snapGrid = false;
+        this.isPinching = false;
         /*********************************************************
          * 文本相关配置（全局）
          ********************************************************/
@@ -97,6 +100,7 @@ var EditConfigModel = /** @class */ (function () {
         this.edgeTextDraggable = false;
         this.edgeTextMultiple = false; // 是否支持多个边文本
         this.edgeTextVertical = false; // 边文本朝向是否是纵向
+        this.anchorProximityValidate = false; // 仅在靠近锚点时触发连接校验
         /*********************************************************
          * 节点相关配置
          ********************************************************/
@@ -196,6 +200,9 @@ var EditConfigModel = /** @class */ (function () {
     __decorate([
         mobx_1.observable
     ], EditConfigModel.prototype, "snapGrid", void 0);
+    __decorate([
+        mobx_1.observable
+    ], EditConfigModel.prototype, "isPinching", void 0);
     __decorate([
         mobx_1.observable
     ], EditConfigModel.prototype, "textMode", void 0);
@@ -235,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 () {
@@ -1102,6 +1103,7 @@ var GraphModel = /** @class */ (function () {
         var _a;
         this.selectElements.forEach(function (element) {
             element === null || element === void 0 ? void 0 : element.setSelected(false);
+            element === null || element === void 0 ? void 0 : element.setHovered(false);
         });
         this.selectElements.clear();
         /**

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/tool/MultipleSelectTool.d.ts

@@ -5,7 +5,7 @@ export default class MultipleSelect extends Component<IToolProps> {
     static toolName: string;
     stepDrag: StepDrag;
     constructor(props: IToolProps);
-    handleMouseDown: (ev: MouseEvent) => void;
+    handleMouseDown: (ev: PointerEvent) => void;
     handleWheelEvent: (ev: WheelEvent) => void;
     onDragging: ({ deltaX, deltaY }: IDragParams) => void;
     handleContextMenu: (ev: MouseEvent) => void;

package/lib/tool/MultipleSelectTool.js

@@ -149,7 +149,7 @@ var MultipleSelect = /** @class */ (function (_super) {
             height: "".concat(y1 - y + 20 * SCALE_Y, "px"),
             'border-width': "".concat(2 * SCALE_X, "px"),
         };
-        return ((0, jsx_runtime_1.jsx)("div", { className: "lf-multiple-select", style: style, onMouseDown: this.handleMouseDown, onContextMenu: this.handleContextMenu, onWheel: this.handleWheelEvent }));
+        return ((0, jsx_runtime_1.jsx)("div", { className: "lf-multiple-select", style: style, onPointerDown: this.handleMouseDown, onContextMenu: this.handleContextMenu, onWheel: this.handleWheelEvent }));
     };
     MultipleSelect.toolName = 'multiple-select-tool';
     MultipleSelect = __decorate([

package/lib/util/drag.d.ts

@@ -3,7 +3,7 @@ import EventEmitter from '../event/eventEmitter';
 export type IDragParams = {
     deltaX: number;
     deltaY: number;
-    event?: MouseEvent;
+    event?: PointerEvent;
     [key: string]: unknown;
 };
 export type ICreateDragParams = {
@@ -40,9 +40,9 @@ export declare class StepDrag {
     constructor({ onDragStart, onDragging, onDragEnd, eventType, eventCenter, step, isStopPropagation, model, data, }: IStepperDragProps);
     setStep(step: number): void;
     setModel(model: Model.BaseModel): void;
-    handleMouseDown: (e: MouseEvent) => void;
-    handleMouseMove: (e: MouseEvent) => void;
-    handleMouseUp: (e: MouseEvent) => void;
+    handleMouseDown: (e: PointerEvent) => void;
+    handleMouseMove: (e: PointerEvent) => void;
+    handleMouseUp: (e: PointerEvent) => void;
     cancelDrag: () => void;
     destroy: () => void;
 }

package/lib/util/drag.js

@@ -29,8 +29,8 @@ var StepDrag = /** @class */ (function () {
             _this.isStartDragging = true;
             _this.startX = e.clientX;
             _this.startY = e.clientY;
-            DOC.addEventListener('mousemove', _this.handleMouseMove, false);
-            DOC.addEventListener('mouseup', _this.handleMouseUp, false);
+            DOC.addEventListener('pointermove', _this.handleMouseMove, false);
+            DOC.addEventListener('pointerup', _this.handleMouseUp, false);
             var elementData = (_a = _this.model) === null || _a === void 0 ? void 0 : _a.getData();
             (_b = _this.eventCenter) === null || _b === void 0 ? void 0 : _b.emit(constant_1.EventType["".concat(_this.eventType, "_MOUSEDOWN")], {
                 e: e,
@@ -42,6 +42,7 @@ var StepDrag = /** @class */ (function () {
             var _a, _b;
             if (_this.isStopPropagation)
                 e.stopPropagation();
+            e.preventDefault();
             if (!_this.isStartDragging)
                 return;
             _this.sumDeltaX += e.clientX - _this.startX;
@@ -97,11 +98,15 @@ var StepDrag = /** @class */ (function () {
             _this.isStartDragging = false;
             if (_this.isStopPropagation)
                 e.stopPropagation();
+            var target = e.target;
+            if (target && typeof target.releasePointerCapture === 'function') {
+                target.releasePointerCapture(e.pointerId);
+            }
             // fix #568: 如果onDragging在下一个事件循环中触发，而drop在当前事件循环，会出现问题。
             Promise.resolve().then(function () {
                 var _a, _b, _c;
-                DOC.removeEventListener('mousemove', _this.handleMouseMove, false);
-                DOC.removeEventListener('mouseup', _this.handleMouseUp, false);
+                DOC.removeEventListener('pointermove', _this.handleMouseMove, false);
+                DOC.removeEventListener('pointerup', _this.handleMouseUp, false);
                 var elementData = (_a = _this.model) === null || _a === void 0 ? void 0 : _a.getData();
                 (_b = _this.eventCenter) === null || _b === void 0 ? void 0 : _b.emit(constant_1.EventType["".concat(_this.eventType, "_MOUSEUP")], {
                     e: e,
@@ -119,8 +124,8 @@ var StepDrag = /** @class */ (function () {
         };
         this.cancelDrag = function () {
             var DOC = window === null || window === void 0 ? void 0 : window.document;
-            DOC.removeEventListener('mousemove', _this.handleMouseMove, false);
-            DOC.removeEventListener('mouseup', _this.handleMouseUp, false);
+            DOC.removeEventListener('pointermove', _this.handleMouseMove, false);
+            DOC.removeEventListener('pointerup', _this.handleMouseUp, false);
             _this.onDragEnd({ event: undefined });
             _this.isDragging = false;
         };

package/lib/view/Anchor.d.ts

@@ -13,7 +13,7 @@ interface IProps {
     anchorIndex: number;
     graphModel: GraphModel;
     nodeModel: BaseNodeModel;
-    setHoverOff: (e: MouseEvent) => void;
+    setHoverOff: (e: PointerEvent) => void;
 }
 interface IState {
     startX: number;
@@ -38,8 +38,9 @@ declare class Anchor extends Component<IProps, IState> {
         incomingEdgeList: import("../model").BaseEdgeModel<LogicFlow.PropertiesType>[];
         outgoingEdgeList: import("../model").BaseEdgeModel<LogicFlow.PropertiesType>[];
     };
-    checkEnd: (event: MouseEvent | null | undefined) => import("../model").BaseEdgeModel<LogicFlow.PropertiesType> | null | undefined;
-    moveAnchorEnd(endX: number, endY: number): void;
+    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

@@ -105,7 +105,7 @@ var Anchor = /** @class */ (function (_super) {
                 endY: y1,
                 dragging: true,
             });
-            _this.moveAnchorEnd(x1, y1);
+            _this.moveAnchorEnd(x1, y1, event);
             if (nearBoundary.length > 0 && !stopMoveGraph && autoExpand) {
                 _this.t = (0, util_1.createRaf)(function () {
                     var _a = __read(nearBoundary, 2), translateX = _a[0], translateY = _a[1];
@@ -115,7 +115,7 @@ var Anchor = /** @class */ (function (_super) {
                         endX: endX - translateX,
                         endY: endY - translateY,
                     });
-                    _this.moveAnchorEnd(endX - translateX, endY - translateY);
+                    _this.moveAnchorEnd(endX - translateX, endY - translateY, event);
                 });
             }
             eventCenter.emit(constant_1.EventType.ANCHOR_DRAG, {
@@ -141,6 +141,11 @@ var Anchor = /** @class */ (function (_super) {
             _this.sourceRuleResults.clear();
             _this.targetRuleResults.clear();
             var _b = _this.props, graphModel = _b.graphModel, nodeModel = _b.nodeModel, anchorData = _b.anchorData;
+            // 拖拽结束清理：取消悬浮态
+            if (_this.preTargetNode) {
+                _this.preTargetNode.setHovered(false);
+                _this.preTargetNode = undefined;
+            }
             graphModel.eventCenter.emit(constant_1.EventType.ANCHOR_DRAGEND, {
                 data: anchorData,
                 e: event,
@@ -244,9 +249,8 @@ var Anchor = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    Anchor.prototype.moveAnchorEnd = function (endX, endY) {
-        var _a, _b;
-        var _c = this.props, graphModel = _c.graphModel, nodeModel = _c.nodeModel, anchorData = _c.anchorData;
+    Anchor.prototype.moveAnchorEnd = function (endX, endY, event) {
+        var _a = this.props, graphModel = _a.graphModel, nodeModel = _a.nodeModel, anchorData = _a.anchorData;
         var info = (0, util_1.targetNodeInfo)({
             x: endX,
             y: endY,
@@ -262,30 +266,61 @@ 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 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);
             }
-            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);
+            // 人工触发进入目标节点事件，同步设置 hovered 以驱动锚点显隐和样式
+            if (!targetNode.isHovered) {
+                var nodeData = targetNode.getData();
+                if (event) {
+                    graphModel.eventCenter.emit(constant_1.EventType.NODE_MOUSEENTER, {
+                        data: nodeData,
+                        e: event,
+                    });
+                }
+                targetNode.setHovered(true);
             }
         }
         else if (this.preTargetNode &&
             this.preTargetNode.state !== constant_1.ElementState.DEFAULT) {
             // 为了保证鼠标离开的时候，将上一个节点状态重置为正常状态。
             this.preTargetNode.setElementState(constant_1.ElementState.DEFAULT);
+            // 未命中任何节点：人工派发离开事件并取消悬浮，避免状态残留
+            var prevData = this.preTargetNode.getData();
+            if (event) {
+                graphModel.eventCenter.emit(constant_1.EventType.NODE_MOUSELEAVE, {
+                    data: prevData,
+                    e: event,
+                });
+            }
+            this.preTargetNode.setHovered(false);
+            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 () {
@@ -307,7 +342,7 @@ var Anchor = /** @class */ (function (_super) {
                             e: ev,
                             nodeModel: nodeModel,
                         });
-                    }, onMouseDown: function (ev) {
+                    }, onPointerDown: function (ev) {
                         graphModel.eventCenter.emit(constant_1.EventType.ANCHOR_MOUSEDOWN, {
                             data: anchorData,
                             e: ev,