@logicflow/core 2.1.4 → 2.2.0

package/lib/view/edge/PolylineEdge.d.ts

@@ -34,7 +34,7 @@ export declare class PolylineEdge extends BaseEdge<IPolylineEdgeProps> {
     /**
      * 不支持重写
      */
-    beforeDragStart: (e: any, appendInfo: any) => void;
+    beforeDragStart: (e: PointerEvent, appendInfo: any) => void;
     /**
      * @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

package/lib/view/edge/PolylineEdge.js

@@ -263,7 +263,7 @@ var PolylineEdge = /** @class */ (function (_super) {
                     }
                     appendInfo.direction = constant_1.SegmentDirection.HORIZONTAL;
                 }
-                append = ((0, jsx_runtime_1.jsx)("g", { className: this_1.isDragging ? 'lf-dragging' : 'lf-drag-able', onMouseDown: function (e) { return _this.beforeDragStart(e, appendInfo); }, children: (0, jsx_runtime_1.jsx)("g", { className: className, children: this_1.getAppendShape(appendInfo) }) }));
+                append = ((0, jsx_runtime_1.jsx)("g", { className: this_1.isDragging ? 'lf-dragging' : 'lf-drag-able', onPointerDown: function (e) { return _this.beforeDragStart(e, appendInfo); }, children: (0, jsx_runtime_1.jsx)("g", { className: className, children: this_1.getAppendShape(appendInfo) }) }));
             }
             LineAppendList.push(append);
         };

package/lib/view/node/BaseNode.d.ts

@@ -19,6 +19,7 @@ export declare abstract class BaseNode<P extends IProps = IProps> extends Compon
     mouseUpDrag?: boolean;
     startTime?: number;
     modelDisposer: IReactionDisposer;
+    longPressTimer?: number;
     constructor(props: IProps);
     componentWillUnmount(): void;
     componentDidMount(): void;
@@ -37,7 +38,7 @@ export declare abstract class BaseNode<P extends IProps = IProps> extends Compon
     handleMouseUp: () => void;
     handleClick: (e: MouseEvent) => void;
     handleContextMenu: (ev: MouseEvent) => void;
-    handleMouseDown: (ev: MouseEvent) => void;
+    handleMouseDown: (ev: PointerEvent) => void;
     handleFocus: () => void;
     handleBlur: () => void;
     setHoverOn: (ev: MouseEvent) => void;

package/lib/view/node/BaseNode.js

@@ -172,6 +172,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
@@ -272,6 +276,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;
@@ -453,7 +467,9 @@ var BaseNode = /** @class */ (function (_super) {
             if (adjustNodePosition && draggable) {
                 this.stepDrag.setStep(gridSize * SCALE_X);
             }
-            nodeShape = ((0, jsx_runtime_1.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 = ((0, jsx_runtime_1.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/lib/view/overlay/BezierAdjustOverlay.js

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

package/lib/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/lib/view/overlay/CanvasOverlay.js

@@ -14,17 +14,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);
@@ -44,11 +33,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,
             });
@@ -126,8 +120,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;
@@ -143,6 +165,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 util_1.StepDrag({
             onDragging: _this.onDragging,
@@ -162,11 +241,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 ((0, jsx_runtime_1.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 ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)("g", { transform: transform, children: children }) })));
+                : 'lf-canvas-overlay lf-drag-able', children: (0, jsx_runtime_1.jsx)("g", { transform: transform, children: children }) }));
     };
     CanvasOverlay = __decorate([
         __1.observer

package/lib/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/lib/view/text/BaseText.js

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

package/package.json

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

package/src/model/EditConfigModel.ts

@@ -125,6 +125,7 @@ export interface IEditConfigType {
   edgeTextMode: TextMode
   // 开启网格对齐
   snapGrid: boolean
+  isPinching: boolean
 }
 
 export type IConfigKeys = keyof IEditConfigType
@@ -186,6 +187,7 @@ const allKeys = [
   'edgeTextMultiple', // 是否支持多个边文本
   'nodeTextVertical', // 节点文本是否纵向显示
   'edgeTextVertical', // 边文本是否纵向显示
+  'isPinching', //是否是双指捏合态
 ] as const
 
 /**
@@ -202,6 +204,7 @@ export class EditConfigModel {
   @observable stopMoveGraph = false
   @observable stopScrollGraph = false
   @observable snapGrid = false
+  @observable isPinching = false
   /*********************************************************
    * 文本相关配置（全局）
    ********************************************************/

package/src/model/GraphModel.ts

@@ -1248,6 +1248,7 @@ export class GraphModel {
   clearSelectElements() {
     this.selectElements.forEach((element) => {
       element?.setSelected(false)
+      element?.setHovered(false)
     })
     this.selectElements.clear()
     /**

package/src/tool/MultipleSelectTool.tsx

@@ -26,7 +26,7 @@ export default class MultipleSelect extends Component<IToolProps> {
     })
   }
 
-  handleMouseDown = (ev: MouseEvent) => {
+  handleMouseDown = (ev: PointerEvent) => {
     this.stepDrag.handleMouseDown(ev)
   }
   // 使多选区域的滚轮事件可以触发画布的滚轮事件
@@ -123,7 +123,7 @@ export default class MultipleSelect extends Component<IToolProps> {
       <div
         className="lf-multiple-select"
         style={style}
-        onMouseDown={this.handleMouseDown}
+        onPointerDown={this.handleMouseDown}
         onContextMenu={this.handleContextMenu}
         onWheel={this.handleWheelEvent}
       />

package/src/util/drag.ts

@@ -10,7 +10,7 @@ const LEFT_MOUSE_BUTTON_CODE = 0
 export type IDragParams = {
   deltaX: number
   deltaY: number
-  event?: MouseEvent
+  event?: PointerEvent
   [key: string]: unknown
 }
 
@@ -99,16 +99,16 @@ export class StepDrag {
     this.model = model
   }
 
-  handleMouseDown = (e: MouseEvent) => {
+  handleMouseDown = (e: PointerEvent) => {
     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
-
-    DOC.addEventListener('mousemove', this.handleMouseMove, false)
-    DOC.addEventListener('mouseup', this.handleMouseUp, false)
+    DOC.addEventListener('pointermove', this.handleMouseMove, false)
+    DOC.addEventListener('pointerup', this.handleMouseUp, false)
     const elementData = this.model?.getData()
     this.eventCenter?.emit(EventType[`${this.eventType}_MOUSEDOWN`], {
       e,
@@ -117,8 +117,9 @@ export class StepDrag {
     this.startTime = new Date().getTime()
   }
 
-  handleMouseMove = (e: MouseEvent) => {
+  handleMouseMove = (e: PointerEvent) => {
     if (this.isStopPropagation) e.stopPropagation()
+    e.preventDefault()
     if (!this.isStartDragging) return
     this.sumDeltaX += e.clientX - this.startX
     this.sumDeltaY += e.clientY - this.startY
@@ -170,15 +171,19 @@ export class StepDrag {
     }
   }
 
-  handleMouseUp = (e: MouseEvent) => {
+  handleMouseUp = (e: PointerEvent) => {
     const DOC = window.document
 
     this.isStartDragging = false
     if (this.isStopPropagation) e.stopPropagation()
+    const target = e.target as any
+    if (target && typeof target.releasePointerCapture === 'function') {
+      target.releasePointerCapture(e.pointerId)
+    }
     // fix #568: 如果onDragging在下一个事件循环中触发，而drop在当前事件循环，会出现问题。
     Promise.resolve().then(() => {
-      DOC.removeEventListener('mousemove', this.handleMouseMove, false)
-      DOC.removeEventListener('mouseup', this.handleMouseUp, false)
+      DOC.removeEventListener('pointermove', this.handleMouseMove, false)
+      DOC.removeEventListener('pointerup', this.handleMouseUp, false)
       const elementData = this.model?.getData()
       this.eventCenter?.emit(EventType[`${this.eventType}_MOUSEUP`], {
         e,
@@ -195,9 +200,8 @@ export class StepDrag {
   }
   cancelDrag = () => {
     const DOC: any = 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/src/view/Anchor.tsx

@@ -29,7 +29,7 @@ interface IProps {
   anchorIndex: number
   graphModel: GraphModel
   nodeModel: BaseNodeModel
-  setHoverOff: (e: MouseEvent) => void
+  setHoverOff: (e: PointerEvent) => void
 }
 
 interface IState {
@@ -154,7 +154,7 @@ class Anchor extends Component<IProps, IState> {
       endY: y1,
       dragging: true,
     })
-    this.moveAnchorEnd(x1, y1)
+    this.moveAnchorEnd(x1, y1, event)
     if (nearBoundary.length > 0 && !stopMoveGraph && autoExpand) {
       this.t = createRaf(() => {
         const [translateX, translateY] = nearBoundary
@@ -164,7 +164,7 @@ class Anchor extends Component<IProps, IState> {
           endX: endX - translateX,
           endY: endY - translateY,
         })
-        this.moveAnchorEnd(endX - translateX, endY - translateY)
+        this.moveAnchorEnd(endX - translateX, endY - translateY, event)
       })
     }
     eventCenter.emit(EventType.ANCHOR_DRAG, {
@@ -189,6 +189,11 @@ class Anchor extends Component<IProps, IState> {
     this.sourceRuleResults.clear()
     this.targetRuleResults.clear()
     const { graphModel, nodeModel, anchorData } = this.props
+    // 拖拽结束清理：取消悬浮态
+    if (this.preTargetNode) {
+      this.preTargetNode.setHovered(false)
+      this.preTargetNode = undefined
+    }
 
     graphModel.eventCenter.emit(EventType.ANCHOR_DRAGEND, {
       data: anchorData,
@@ -216,7 +221,7 @@ class Anchor extends Component<IProps, IState> {
     }
   }
 
-  checkEnd = (event: MouseEvent | null | undefined) => {
+  checkEnd = (event: PointerEvent | null | undefined) => {
     const {
       graphModel,
       nodeModel,
@@ -289,7 +294,7 @@ class Anchor extends Component<IProps, IState> {
     }
   }
 
-  moveAnchorEnd(endX: number, endY: number) {
+  moveAnchorEnd(endX: number, endY: number, event?: PointerEvent) {
     const { graphModel, nodeModel, anchorData } = this.props
     const info = targetNodeInfo(
       {
@@ -344,12 +349,33 @@ class Anchor extends Component<IProps, IState> {
       } else {
         targetNode.setElementState(ElementState.NOT_ALLOW_CONNECT)
       }
+      // 人工触发进入目标节点事件，同步设置 hovered 以驱动锚点显隐和样式
+      if (!targetNode.isHovered) {
+        const nodeData = targetNode.getData()
+        if (event) {
+          graphModel.eventCenter.emit(EventType.NODE_MOUSEENTER, {
+            data: nodeData,
+            e: event,
+          })
+        }
+        targetNode.setHovered(true)
+      }
     } else if (
       this.preTargetNode &&
       this.preTargetNode.state !== ElementState.DEFAULT
     ) {
       // 为了保证鼠标离开的时候，将上一个节点状态重置为正常状态。
       this.preTargetNode.setElementState(ElementState.DEFAULT)
+      // 未命中任何节点：人工派发离开事件并取消悬浮，避免状态残留
+      const prevData = this.preTargetNode.getData()
+      if (event) {
+        graphModel.eventCenter.emit(EventType.NODE_MOUSELEAVE, {
+          data: prevData,
+          e: event,
+        })
+      }
+      this.preTargetNode.setHovered(false)
+      this.preTargetNode = undefined
     }
   }
 
@@ -375,7 +401,7 @@ class Anchor extends Component<IProps, IState> {
               nodeModel,
             })
           }}
-          onMouseDown={(ev) => {
+          onPointerDown={(ev) => {
             graphModel.eventCenter.emit(EventType.ANCHOR_MOUSEDOWN, {
               data: anchorData,
               e: ev!,

package/src/view/Control.tsx

@@ -393,7 +393,7 @@ export class ResizeControl extends Component<
           height={25}
           fill="transparent"
           stroke="transparent"
-          onMouseDown={this.dragHandler.handleMouseDown}
+          onPointerDown={this.dragHandler.handleMouseDown}
         />
       </g>
     )

package/src/view/Rotate.tsx

@@ -99,7 +99,7 @@ class RotateControlPoint extends Component<IRotateControlProps> {
     return (
       <g className="lf-rotate-control">
         <g
-          onMouseDown={(ev) => {
+          onPointerDown={(ev) => {
             this.stepperDrag.handleMouseDown(ev)
           }}
         >

package/src/view/behavior/dnd.ts

@@ -11,6 +11,8 @@ export class Dnd {
   nodeConfig: OnDragNodeConfig | null = null
   lf: LogicFlow
   fakeNode: BaseNodeModel | null = null
+  docPointerMove?: (e: PointerEvent) => void
+  docPointerUp?: (e: PointerEvent) => void
 
   constructor(params: { lf: LogicFlow }) {
     const { lf } = params
@@ -36,19 +38,67 @@ export class Dnd {
     }
   }
 
+  isInsideCanvas(e: PointerEvent): boolean {
+    const overlay = this.lf.graphModel.rootEl.querySelector(
+      '[name="canvas-overlay"]',
+    ) as HTMLElement | null
+    const topEl = window.document.elementFromPoint(
+      e.clientX,
+      e.clientY,
+    ) as HTMLElement | null
+    return (
+      topEl === overlay ||
+      (topEl !== null && !!overlay && overlay.contains(topEl))
+    )
+  }
   startDrag(nodeConfig: OnDragNodeConfig) {
     const { editConfigModel } = this.lf.graphModel
-    if (!editConfigModel?.isSilentMode) {
-      this.nodeConfig = nodeConfig
-      window.document.addEventListener('mouseup', this.stopDrag)
+    if (editConfigModel?.isSilentMode) return
+    this.nodeConfig = nodeConfig
+    // 指针移动：根据命中结果判断是否在画布覆盖层上，驱动假节点创建/移动或清理
+    this.docPointerMove = (e: PointerEvent) => {
+      if (!this.nodeConfig) return
+      // 离开画布：清理吸附线与假节点
+      if (!this.isInsideCanvas(e)) {
+        this.onDragLeave()
+        return
+      }
+      // 首次进入画布：创建假节点并初始化位置
+      if (!this.fakeNode) {
+        this.dragEnter(e)
+        return
+      }
+      // 在画布内移动：更新假节点位置与吸附线
+      this.onDragOver(e)
+    }
+    // 指针抬起：在画布内落点生成节点，否则清理假节点
+    this.docPointerUp = (e: PointerEvent) => {
+      if (!this.nodeConfig) return
+      if (this.isInsideCanvas(e)) {
+        this.onDrop(e)
+      } else {
+        this.onDragLeave()
+      }
+      // 阻止默认行为与冒泡，避免滚动/点击穿透
+      e.preventDefault()
+      e.stopPropagation()
+      // 结束拖拽并移除监听
+      this.stopDrag()
     }
+    window.document.addEventListener('pointermove', this.docPointerMove)
+    window.document.addEventListener('pointerup', this.docPointerUp)
   }
 
   stopDrag = () => {
     this.nodeConfig = null
-    window.document.removeEventListener('mouseup', this.stopDrag)
+    if (this.docPointerMove) {
+      window.document.removeEventListener('pointermove', this.docPointerMove)
+    }
+    if (this.docPointerUp) {
+      window.document.removeEventListener('pointerup', this.docPointerUp)
+    }
   }
-  dragEnter = (e: MouseEvent) => {
+  dragEnter = (e: PointerEvent) => {
     if (!this.nodeConfig || this.fakeNode) return
     this.fakeNode = this.lf.createFakeNode({
       ...this.nodeConfig,
@@ -107,17 +157,6 @@ export class Dnd {
     this.lf.graphModel.removeFakeNode()
     this.fakeNode = null
   }
-
-  eventMap() {
-    return {
-      onMouseEnter: this.dragEnter,
-      onMouseOver: this.dragEnter, // IE11
-      onMouseMove: this.onDragOver,
-      onMouseLeave: this.onDragLeave,
-      // onMouseOut: this.onDragLeave, // IE11
-      onMouseUp: this.onDrop,
-    }
-  }
 }
 
 export default Dnd

package/src/view/edge/AdjustPoint.tsx

@@ -78,7 +78,7 @@ export class AdjustPoint extends Component<IProps, IState> {
     })
   }
 
-  handleMouseDown = (ev: MouseEvent) => {
+  handleMouseDown = (ev: PointerEvent) => {
     if (this.stepDrag) {
       this.stepDrag.handleMouseDown(ev)
     }
@@ -414,7 +414,7 @@ export class AdjustPoint extends Component<IProps, IState> {
     return (
       <g
         pointerEvents={dragging ? 'none' : ''}
-        onMouseDown={this.handleMouseDown}
+        onPointerDown={this.handleMouseDown}
       >
         {!dragging ? getAdjustPointShape(x, y, edgeModel) : ''}
       </g>