@logicflow/core 2.1.3 → 2.2.0

package/lib/model/GraphModel.js

@@ -119,6 +119,7 @@ var GraphModel = /** @class */ (function () {
         this.edgeType = options.edgeType || 'polyline';
         this.animation = (0, util_1.setupAnimation)(animation);
         this.overlapMode = options.overlapMode || constant_1.OverlapMode.DEFAULT;
+        this.isMiniMap = options.isMiniMap || false;
         this.width = (_a = options.width) !== null && _a !== void 0 ? _a : this.rootEl.getBoundingClientRect().width;
         this.isContainerWidth = (0, lodash_es_1.isNil)(options.width);
         this.height = (_b = options.height) !== null && _b !== void 0 ? _b : this.rootEl.getBoundingClientRect().height;
@@ -199,7 +200,11 @@ var GraphModel = /** @class */ (function () {
          * todo: 性能优化
          */
         get: function () {
-            var elements = __spreadArray(__spreadArray([], __read(this.nodes), false), __read(this.edges), false).sort(function (a, b) { return a.zIndex - b.zIndex; });
+            var sortElement = function (list) {
+                return __spreadArray([], __read(list), false).sort(function (a, b) { return a.zIndex - b.zIndex; });
+            };
+            // 默认情况下节点与边按照 zIndex 排序
+            var elements = sortElement(__spreadArray(__spreadArray([], __read(this.nodes), false), __read(this.edges), false));
             // 只显示可见区域的节点和边
             var visibleElements = [];
             // TODO: 缓存，优化计算效率 by xutao. So how?
@@ -643,6 +648,19 @@ var GraphModel = /** @class */ (function () {
             return model.textMode || edgeTextMode || textMode || constant_1.TextMode.TEXT;
         }
     };
+    /**
+     * 内部保留方法，请勿直接使用
+     */
+    /**
+     * 设置重叠模式
+     * @param mode 重叠模式
+     */
+    GraphModel.prototype.setOverlapMode = function (mode) {
+        this.overlapMode = mode;
+        this.eventCenter.emit('overlap:change', {
+            overlapMode: mode,
+        });
+    };
     /**
      * 更新元素的文本模式
      * @param mode
@@ -685,14 +703,19 @@ var GraphModel = /** @class */ (function () {
         var _a, _b, _c;
         var element = ((_a = this.nodesMap[id]) === null || _a === void 0 ? void 0 : _a.model) || ((_b = this.edgesMap[id]) === null || _b === void 0 ? void 0 : _b.model);
         if (element) {
-            if (this.overlapMode === constant_1.OverlapMode.DEFAULT) {
-                (_c = this.topElement) === null || _c === void 0 ? void 0 : _c.setZIndex();
-                element.setZIndex(constant_1.ELEMENT_MAX_Z_INDEX);
-                this.topElement = element;
+            // 静态模式toFront不做处理
+            if (this.overlapMode === constant_1.OverlapMode.STATIC) {
+                return;
             }
+            // 递增模式下，将需指定元素zIndex设置为当前最大zIndex + 1
             if (this.overlapMode === constant_1.OverlapMode.INCREASE) {
                 this.setElementZIndex(id, 'top');
+                return;
             }
+            // 默认模式（节点在上）和边在上模式下，将原置顶元素重新恢复原有层级，将需指定元素zIndex设置为最大zIndex
+            (_c = this.topElement) === null || _c === void 0 ? void 0 : _c.setZIndex();
+            element.setZIndex(constant_1.ELEMENT_MAX_Z_INDEX);
+            this.topElement = element;
         }
     };
     /**
@@ -1079,12 +1102,13 @@ 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();
         /**
          * 如果堆叠模式为默认模式，则将置顶元素重新恢复原有层级
          */
-        if (this.overlapMode === constant_1.OverlapMode.DEFAULT) {
+        if ([constant_1.OverlapMode.DEFAULT, constant_1.OverlapMode.EDGE_TOP].includes(this.overlapMode)) {
             (_a = this.topElement) === null || _a === void 0 ? void 0 : _a.setZIndex();
         }
     };
@@ -1385,7 +1409,7 @@ var GraphModel = /** @class */ (function () {
         this.elementsModelMap.clear();
     };
     /**
-     * 获取图形区域虚拟矩型的尺寸和中心坐标
+     * 获取图形区域虚拟矩形的尺寸和中心坐标
      * @returns
      */
     GraphModel.prototype.getVirtualRectSize = function () {
@@ -1409,7 +1433,7 @@ var GraphModel = /** @class */ (function () {
         var maxY = Math.max.apply(Math, __spreadArray([], __read(nodesY), false));
         var virtualRectWidth = maxX - minX || 0;
         var virtualRectHeight = maxY - minY || 0;
-        // 获取虚拟矩型的中心坐标
+        // 获取虚拟矩形的中心坐标
         var virtualRectCenterPositionX = minX + virtualRectWidth / 2;
         var virtualRectCenterPositionY = minY + virtualRectHeight / 2;
         return {
@@ -1564,6 +1588,9 @@ var GraphModel = /** @class */ (function () {
     __decorate([
         mobx_1.computed
     ], GraphModel.prototype, "selectNodes", null);
+    __decorate([
+        mobx_1.action
+    ], GraphModel.prototype, "setOverlapMode", null);
     __decorate([
         mobx_1.action
     ], GraphModel.prototype, "setTextMode", null);

package/lib/model/edge/BaseEdgeModel.d.ts

@@ -1,6 +1,6 @@
 import { BaseNodeModel, GraphModel, Model } from '..';
 import LogicFlow from '../../LogicFlow';
-import { ElementState, ElementType, ModelType, TextMode } from '../../constant';
+import { ElementState, ElementType, ModelType, OverlapMode, TextMode } from '../../constant';
 import Point = LogicFlow.Point;
 import EdgeData = LogicFlow.EdgeData;
 import EdgeConfig = LogicFlow.EdgeConfig;
@@ -271,5 +271,6 @@ export declare class BaseEdgeModel<P extends PropertiesType = PropertiesType> im
     getAdjustStart(): LogicFlow.Point;
     getAdjustEnd(): LogicFlow.Point;
     updateAfterAdjustStartAndEnd({ startPoint, endPoint, }: Record<'startPoint' | 'endPoint', Point>): void;
+    updateZIndexByOverlap(overlapMode: OverlapMode, defaultZIndex: any): void;
 }
 export default BaseEdgeModel;

package/lib/model/edge/BaseEdgeModel.js

@@ -76,6 +76,7 @@ var BaseEdgeModel = /** @class */ (function () {
      * setAttributes除了初始化调用外，还会在properties发生变化后调用。
      */
     BaseEdgeModel.prototype.initEdgeData = function (data) {
+        var _this = this;
         if (!data.properties) {
             data.properties = {};
         }
@@ -91,10 +92,8 @@ var BaseEdgeModel = /** @class */ (function () {
         var adjustEdgeStartAndEnd = this.graphModel.editConfigModel.adjustEdgeStartAndEnd;
         this.isShowAdjustPoint = adjustEdgeStartAndEnd;
         (0, lodash_es_1.assign)(this, (0, util_1.pickEdgeConfig)(data));
-        var overlapMode = this.graphModel.overlapMode;
-        if (overlapMode === constant_1.OverlapMode.INCREASE) {
-            this.zIndex = data.zIndex || (0, util_1.getZIndex)();
-        }
+        var _a = this.graphModel, overlapMode = _a.overlapMode, eventCenter = _a.eventCenter;
+        this.updateZIndexByOverlap(overlapMode, data.zIndex || (0, util_1.getZIndex)());
         // 设置边的 anchors，也就是边的两个端点
         // 端点依赖于 edgeData 的 sourceNode 和 targetNode
         this.setAnchors();
@@ -102,6 +101,10 @@ var BaseEdgeModel = /** @class */ (function () {
         this.initPoints();
         // 文本位置依赖于边上的所有拐点
         this.formatText(data);
+        eventCenter.on('overlap:change', function (data) {
+            var newMode = data.overlapMode;
+            _this.updateZIndexByOverlap(newMode, _this.zIndex || (0, util_1.getZIndex)());
+        });
     };
     /**
      * 设置model属性
@@ -325,7 +328,9 @@ var BaseEdgeModel = /** @class */ (function () {
             startPoint: (0, lodash_es_1.assign)({}, this.startPoint),
             endPoint: (0, lodash_es_1.assign)({}, this.endPoint),
         };
-        if (this.graphModel.overlapMode === constant_1.OverlapMode.INCREASE) {
+        // 因为默认模式和边在上模式下，对节点的zIndex要求不高（因为渲染的时候会按照模式对所有元素进行排序）
+        // 所以只在递增模式和静态模式下设置zIndex
+        if ([constant_1.OverlapMode.INCREASE, constant_1.OverlapMode.STATIC].includes(this.graphModel.overlapMode)) {
             data.zIndex = this.zIndex;
         }
         var _a = this.text, x = _a.x, y = _a.y, value = _a.value;
@@ -589,6 +594,22 @@ var BaseEdgeModel = /** @class */ (function () {
         this.updateStartPoint({ x: startPoint.x, y: startPoint.y });
         this.updateEndPoint({ x: endPoint.x, y: endPoint.y });
     };
+    // 堆叠模式变化时，更新zIndex
+    BaseEdgeModel.prototype.updateZIndexByOverlap = function (overlapMode, defaultZIndex) {
+        switch (overlapMode) {
+            case constant_1.OverlapMode.DEFAULT:
+                this.zIndex = 0;
+                break;
+            case constant_1.OverlapMode.EDGE_TOP:
+                this.zIndex = 1;
+                break;
+            case constant_1.OverlapMode.INCREASE:
+                this.zIndex = defaultZIndex;
+                break;
+            default:
+                break;
+        }
+    };
     BaseEdgeModel.BaseType = constant_1.ElementType.EDGE;
     __decorate([
         mobx_1.observable
@@ -758,6 +779,9 @@ var BaseEdgeModel = /** @class */ (function () {
     __decorate([
         mobx_1.action
     ], BaseEdgeModel.prototype, "updateAfterAdjustStartAndEnd", null);
+    __decorate([
+        mobx_1.action
+    ], BaseEdgeModel.prototype, "updateZIndexByOverlap", null);
     return BaseEdgeModel;
 }());
 exports.BaseEdgeModel = BaseEdgeModel;

package/lib/model/node/BaseNodeModel.d.ts

@@ -1,6 +1,6 @@
 import { GraphModel, Model } from '..';
 import LogicFlow from '../../LogicFlow';
-import { ElementState, ElementType, ModelType, TextMode } from '../../constant';
+import { ElementState, ElementType, ModelType, OverlapMode, TextMode } from '../../constant';
 import { ResizeControl } from '../../view/Control';
 import AnchorConfig = Model.AnchorConfig;
 import GraphElements = LogicFlow.GraphElements;
@@ -288,6 +288,7 @@ export declare class BaseNodeModel<P extends PropertiesType = PropertiesType> im
     updateStyles(styles: Record<string, any>): void;
     setZIndex(zIndex?: number): void;
     updateAttributes(attributes: any): void;
+    updateZIndexByOverlap(overlapMode: OverlapMode, defaultZIndex: any): void;
 }
 export declare namespace BaseNodeModel {
     type PointTuple = [number, number];

package/lib/model/node/BaseNodeModel.js

@@ -175,6 +175,7 @@ var BaseNodeModel = /** @class */ (function () {
      * setAttributes 除了初始化调用外，还会在 properties 发生变化了调用。
      */
     BaseNodeModel.prototype.initNodeData = function (data) {
+        var _this = this;
         if (!data.properties) {
             data.properties = {};
         }
@@ -189,10 +190,12 @@ var BaseNodeModel = /** @class */ (function () {
         // 在下面又将 NodeConfig 中的数据赋值给了 this，应该会触发 setAttributes，确认是否符合预期
         // TODO: 确认 constructor 中赋值 properties 是否必要，此处将 NodeConfig 中所有属性赋值给 this，包括 rotate、rotatable，resizable 等
         (0, lodash_es_1.assign)(this, (0, util_1.pickNodeConfig)(data));
-        var overlapMode = this.graphModel.overlapMode;
-        if (overlapMode === constant_1.OverlapMode.INCREASE) {
-            this.zIndex = data.zIndex || (0, util_1.getZIndex)();
-        }
+        var _a = this.graphModel, overlapMode = _a.overlapMode, eventCenter = _a.eventCenter;
+        this.updateZIndexByOverlap(overlapMode, data.zIndex || (0, util_1.getZIndex)());
+        eventCenter.on('overlap:change', function (data) {
+            var newMode = data.overlapMode;
+            _this.updateZIndexByOverlap(newMode, _this.zIndex || (0, util_1.getZIndex)());
+        });
     };
     /**
      * 设置model属性，每次properties发生变化会触发
@@ -305,7 +308,9 @@ var BaseNodeModel = /** @class */ (function () {
         if (this.rotate) {
             data.rotate = this.rotate;
         }
-        if (this.graphModel.overlapMode === constant_1.OverlapMode.INCREASE) {
+        // 因为默认模式和节点在上模式下，对边的zIndex要求不高（因为渲染的时候会按照模式对所有元素进行排序）
+        // 所以只在递增模式和静态模式下设置zIndex
+        if ([constant_1.OverlapMode.INCREASE, constant_1.OverlapMode.STATIC].includes(this.graphModel.overlapMode)) {
             data.zIndex = this.zIndex;
         }
         if (value) {
@@ -794,6 +799,22 @@ var BaseNodeModel = /** @class */ (function () {
     BaseNodeModel.prototype.updateAttributes = function (attributes) {
         (0, lodash_es_1.assign)(this, attributes);
     };
+    // 堆叠模式变化时，更新zIndex
+    BaseNodeModel.prototype.updateZIndexByOverlap = function (overlapMode, defaultZIndex) {
+        switch (overlapMode) {
+            case constant_1.OverlapMode.DEFAULT:
+                this.zIndex = 1;
+                break;
+            case constant_1.OverlapMode.EDGE_TOP:
+                this.zIndex = 0;
+                break;
+            case constant_1.OverlapMode.INCREASE:
+                this.zIndex = defaultZIndex;
+                break;
+            default:
+                break;
+        }
+    };
     BaseNodeModel.BaseType = constant_1.ElementType.NODE;
     __decorate([
         mobx_1.observable
@@ -948,6 +969,9 @@ var BaseNodeModel = /** @class */ (function () {
     __decorate([
         mobx_1.action
     ], BaseNodeModel.prototype, "updateAttributes", null);
+    __decorate([
+        mobx_1.action
+    ], BaseNodeModel.prototype, "updateZIndexByOverlap", null);
     return BaseNodeModel;
 }());
 exports.BaseNodeModel = BaseNodeModel;

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

@@ -26,11 +26,12 @@ var StepDrag = /** @class */ (function () {
                 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);
             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 +43,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 +99,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 +125,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,8 @@ 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;
     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,7 +249,7 @@ var Anchor = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    Anchor.prototype.moveAnchorEnd = function (endX, endY) {
+    Anchor.prototype.moveAnchorEnd = function (endX, endY, event) {
         var _a, _b;
         var _c = this.props, graphModel = _c.graphModel, nodeModel = _c.nodeModel, anchorData = _c.anchorData;
         var info = (0, util_1.targetNodeInfo)({
@@ -281,11 +286,32 @@ var Anchor = /** @class */ (function (_super) {
             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;
         }
     };
     Anchor.prototype.isShowLine = function () {
@@ -307,7 +333,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,

package/lib/view/Control.js

@@ -349,7 +349,7 @@ var ResizeControl = /** @class */ (function (_super) {
     ResizeControl.prototype.render = function () {
         var _a = this.props, x = _a.x, y = _a.y, direction = _a.direction, model = _a.model;
         var _b = model.getResizeControlStyle(), width = _b.width, height = _b.height, restStyle = __rest(_b, ["width", "height"]);
-        return ((0, jsx_runtime_1.jsxs)("g", { className: "lf-resize-control lf-resize-control-".concat(direction), children: [(0, jsx_runtime_1.jsx)(shape_1.Rect, __assign({ className: "lf-resize-control-content", x: x, y: y, width: width !== null && width !== void 0 ? width : 7, height: height !== null && height !== void 0 ? height : 7 }, restStyle)), (0, jsx_runtime_1.jsx)(shape_1.Rect, { className: "lf-resize-control-content", x: x, y: y, width: 25, height: 25, fill: "transparent", stroke: "transparent", onMouseDown: this.dragHandler.handleMouseDown })] }));
+        return ((0, jsx_runtime_1.jsxs)("g", { className: "lf-resize-control lf-resize-control-".concat(direction), children: [(0, jsx_runtime_1.jsx)(shape_1.Rect, __assign({ className: "lf-resize-control-content", x: x, y: y, width: width !== null && width !== void 0 ? width : 7, height: height !== null && height !== void 0 ? height : 7 }, restStyle)), (0, jsx_runtime_1.jsx)(shape_1.Rect, { className: "lf-resize-control-content", x: x, y: y, width: 25, height: 25, fill: "transparent", stroke: "transparent", onPointerDown: this.dragHandler.handleMouseDown })] }));
     };
     return ResizeControl;
 }(compat_1.Component));

package/lib/view/Rotate.js

@@ -104,7 +104,7 @@ var RotateControlPoint = /** @class */ (function (_super) {
         this.normal = new util_1.Vector(1, 0);
         this.defaultAngle = this.normal.angle(new util_1.Vector(cx - x, cy - y));
         nodeModel.defaultAngle = this.defaultAngle;
-        return ((0, jsx_runtime_1.jsx)("g", { className: "lf-rotate-control", children: (0, jsx_runtime_1.jsx)("g", { onMouseDown: function (ev) {
+        return ((0, jsx_runtime_1.jsx)("g", { className: "lf-rotate-control", children: (0, jsx_runtime_1.jsx)("g", { onPointerDown: function (ev) {
                     _this.stepperDrag.handleMouseDown(ev);
                 }, children: (0, jsx_runtime_1.jsx)(Circle_1.default, __assign({}, this.style, { cx: cx, cy: cy })) }) }));
     };

package/lib/view/behavior/dnd.d.ts

@@ -6,22 +6,18 @@ export declare class Dnd {
     nodeConfig: OnDragNodeConfig | null;
     lf: LogicFlow;
     fakeNode: BaseNodeModel | null;
+    docPointerMove?: (e: PointerEvent) => void;
+    docPointerUp?: (e: PointerEvent) => void;
     constructor(params: {
         lf: LogicFlow;
     });
     clientToLocalPoint({ x, y }: Position): Position;
+    isInsideCanvas(e: PointerEvent): boolean;
     startDrag(nodeConfig: OnDragNodeConfig): void;
     stopDrag: () => void;
-    dragEnter: (e: MouseEvent) => void;
+    dragEnter: (e: PointerEvent) => void;
     onDragOver: (e: MouseEvent) => boolean;
     onDragLeave: () => void;
     onDrop: (e: MouseEvent) => void;
-    eventMap(): {
-        onMouseEnter: (e: MouseEvent) => void;
-        onMouseOver: (e: MouseEvent) => void;
-        onMouseMove: (e: MouseEvent) => boolean;
-        onMouseLeave: () => void;
-        onMouseUp: (e: MouseEvent) => void;
-    };
 }
 export default Dnd;

package/lib/view/behavior/dnd.js

@@ -22,7 +22,12 @@ var Dnd = /** @class */ (function () {
         this.fakeNode = null;
         this.stopDrag = function () {
             _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);
+            }
         };
         this.dragEnter = function (e) {
             if (!_this.nodeConfig || _this.fakeNode)
@@ -94,22 +99,53 @@ var Dnd = /** @class */ (function () {
             y: (0, util_1.snapToGrid)(y1, gridSize, snapGrid),
         };
     };
+    Dnd.prototype.isInsideCanvas = function (e) {
+        var overlay = this.lf.graphModel.rootEl.querySelector('[name="canvas-overlay"]');
+        var topEl = window.document.elementFromPoint(e.clientX, e.clientY);
+        return (topEl === overlay ||
+            (topEl !== null && !!overlay && overlay.contains(topEl)));
+    };
     Dnd.prototype.startDrag = function (nodeConfig) {
+        var _this = this;
         var editConfigModel = this.lf.graphModel.editConfigModel;
-        if (!(editConfigModel === null || editConfigModel === void 0 ? void 0 : editConfigModel.isSilentMode)) {
-            this.nodeConfig = nodeConfig;
-            window.document.addEventListener('mouseup', this.stopDrag);
-        }
-    };
-    Dnd.prototype.eventMap = function () {
-        return {
-            onMouseEnter: this.dragEnter,
-            onMouseOver: this.dragEnter, // IE11
-            onMouseMove: this.onDragOver,
-            onMouseLeave: this.onDragLeave,
-            // onMouseOut: this.onDragLeave, // IE11
-            onMouseUp: this.onDrop,
+        if (editConfigModel === null || editConfigModel === void 0 ? void 0 : editConfigModel.isSilentMode)
+            return;
+        this.nodeConfig = nodeConfig;
+        // 指针移动：根据命中结果判断是否在画布覆盖层上，驱动假节点创建/移动或清理
+        this.docPointerMove = function (e) {
+            if (!_this.nodeConfig)
+                return;
+            // 离开画布：清理吸附线与假节点
+            if (!_this.isInsideCanvas(e)) {
+                _this.onDragLeave();
+                return;
+            }
+            // 首次进入画布：创建假节点并初始化位置
+            if (!_this.fakeNode) {
+                _this.dragEnter(e);
+                return;
+            }
+            // 在画布内移动：更新假节点位置与吸附线
+            _this.onDragOver(e);
+        };
+        // 指针抬起：在画布内落点生成节点，否则清理假节点
+        this.docPointerUp = function (e) {
+            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);
     };
     return Dnd;
 }());

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

@@ -34,7 +34,7 @@ export declare class AdjustPoint extends Component<IProps, IState> {
     targetRuleResults: Map<any, any>;
     sourceRuleResults: Map<any, any>;
     constructor(props: IProps);
-    handleMouseDown: (ev: MouseEvent) => void;
+    handleMouseDown: (ev: PointerEvent) => void;
     onDragStart: () => void;
     onDragging: ({ deltaX, deltaY }: IDragParams) => void;
     onDragEnd: ({ event }: Partial<IDragParams>) => void;

package/lib/view/edge/AdjustPoint.js

@@ -351,7 +351,7 @@ var AdjustPoint = /** @class */ (function (_super) {
     AdjustPoint.prototype.render = function () {
         var _a = this.props, x = _a.x, y = _a.y, getAdjustPointShape = _a.getAdjustPointShape, edgeModel = _a.edgeModel;
         var dragging = this.state.dragging;
-        return ((0, jsx_runtime_1.jsx)("g", { pointerEvents: dragging ? 'none' : '', onMouseDown: this.handleMouseDown, children: !dragging ? getAdjustPointShape(x, y, edgeModel) : '' }));
+        return ((0, jsx_runtime_1.jsx)("g", { pointerEvents: dragging ? 'none' : '', onPointerDown: this.handleMouseDown, children: !dragging ? getAdjustPointShape(x, y, edgeModel) : '' }));
     };
     return AdjustPoint;
 }(compat_1.Component));

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

@@ -17,6 +17,7 @@ export declare abstract class BaseEdge<P extends IProps> extends Component<P, IE
     startTime?: number;
     contextMenuTime?: number;
     clickTimer?: number;
+    longPressTimer?: number;
     textRef: import("preact").RefObject<any>;
     constructor();
     /**
@@ -131,7 +132,7 @@ export declare abstract class BaseEdge<P extends IProps> extends Component<P, IE
     /**
      * 不支持重写
      */
-    handleMouseDown: (e: MouseEvent) => void;
+    handleMouseDown: (e: PointerEvent) => void;
     handleMouseUp: () => void;
     /**
      * 不支持重写