@logicflow/core 2.1.3 → 2.2.0

package/es/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/es/view/behavior/dnd.js

@@ -19,7 +19,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)
@@ -91,22 +96,53 @@ var Dnd = /** @class */ (function () {
             y: 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/es/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/es/view/edge/AdjustPoint.js

@@ -348,7 +348,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 (_jsx("g", { pointerEvents: dragging ? 'none' : '', onMouseDown: this.handleMouseDown, children: !dragging ? getAdjustPointShape(x, y, edgeModel) : '' }));
+        return (_jsx("g", { pointerEvents: dragging ? 'none' : '', onPointerDown: this.handleMouseDown, children: !dragging ? getAdjustPointShape(x, y, edgeModel) : '' }));
     };
     return AdjustPoint;
 }(Component));

package/es/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;
     /**
      * 不支持重写

package/es/view/edge/BaseEdge.js

@@ -126,10 +126,24 @@ var BaseEdge = /** @class */ (function (_super) {
         _this.handleMouseDown = function (e) {
             e.stopPropagation();
             _this.startTime = new Date().getTime();
+            if (_this.longPressTimer) {
+                clearTimeout(_this.longPressTimer);
+            }
+            if (e.pointerType === 'touch') {
+                _this.longPressTimer = window.setTimeout(function () {
+                    if (!_this.props.model.isDragging) {
+                        _this.handleContextMenu(e);
+                    }
+                }, 500);
+            }
         };
         _this.handleMouseUp = function () {
             var model = _this.props.model;
             _this.mouseUpDrag = model.isDragging;
+            if (_this.longPressTimer) {
+                clearTimeout(_this.longPressTimer);
+                _this.longPressTimer = undefined;
+            }
         };
         /**
          * 不支持重写
@@ -452,7 +466,10 @@ var BaseEdge = /** @class */ (function (_super) {
                         isSelected && 'lf-edge-selected',
                     ]
                         .filter(Boolean)
-                        .join(' '), onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp, onClick: this.handleClick, onContextMenu: this.handleContextMenu, onMouseOver: this.setHoverOn, onMouseEnter: this.setHoverOn, onMouseLeave: this.setHoverOff, onFocus: this.handleFocus, onBlur: this.handleBlur, children: [this.getShape(), this.getAppend(), this.getText(), this.getArrow()] }), isShowAdjustPoint && isSelected ? this.getAdjustPoints() : ''] }));
+                        .join(' '), style: {
+                        touchAction: 'none',
+                        WebkitTouchCallout: 'none',
+                    }, onClick: this.handleClick, onContextMenu: this.handleContextMenu, onPointerDown: this.handleMouseDown, onPointerUp: this.handleMouseUp, onPointerCancel: this.handleMouseUp, onMouseOver: this.setHoverOn, onMouseEnter: this.setHoverOn, onMouseLeave: this.setHoverOff, onFocus: this.handleFocus, onBlur: this.handleBlur, children: [this.getShape(), this.getAppend(), this.getText(), this.getArrow()] }), isShowAdjustPoint && isSelected ? this.getAdjustPoints() : ''] }));
     };
     BaseEdge.isObserved = false;
     return BaseEdge;

package/es/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/es/view/edge/PolylineEdge.js

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

package/es/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/es/view/node/BaseNode.js

@@ -168,16 +168,28 @@ 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
             // 点拖拽进画布没有触发mousedown事件，没有startTime，用这个值做区分
             var isDragging = _this.mouseUpDrag === false;
+            var curTime = new Date().getTime();
             if (!_this.startTime)
                 return;
+            var timeInterval = curTime - _this.startTime;
             var _a = _this.props, model = _a.model, graphModel = _a.graphModel;
-            if (!isDragging)
-                return; // 如果是拖拽, 不触发click事件。
+            // 这里会有一种极端情况：当网格大小是1或者关闭网格吸附时，用触摸板点击节点会触发拖拽事件导致节点无法选中
+            // 当触摸板点击节点时,为了防止误触发拖拽导致节点无法选中，允许在非拖拽状态且时间间隔小于100ms时触发点击事件
+            if (!isDragging && timeInterval > 100)
+                return;
+            if (!isDragging) {
+                _this.onDragEnd();
+                _this.handleMouseUp();
+            }
             // 节点数据，多为事件对象数据抛出
             var nodeData = model.getData();
             var position = graphModel.getPointByClient({
@@ -260,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;
@@ -268,6 +290,9 @@ var BaseNode = /** @class */ (function (_super) {
             });
         };
         _this.handleBlur = function () {
+            // 当节点通过自定义锚点实现节点删除时，这里props会变成undefined，需兼容一下
+            if (!_this.props)
+                return;
             var _a = _this.props, model = _a.model, graphModel = _a.graphModel;
             graphModel.eventCenter.emit(EventType.NODE_BLUR, {
                 data: model.getData(),
@@ -438,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/LogicFlow.d.ts

@@ -7,7 +7,7 @@ import Tool from './tool';
 import History from './history';
 import Keyboard from './keyboard';
 import { EventCallback, CallbackArgs, EventArgs } from './event/eventEmitter';
-import { EventType, SegmentDirection } from './constant';
+import { EventType, OverlapMode, SegmentDirection } from './constant';
 import { Grid } from './view/overlay';
 import Extension = LogicFlow.Extension;
 import ExtensionConfig = LogicFlow.ExtensionConfig;
@@ -430,6 +430,7 @@ export declare class LogicFlow {
      * 清空画布
      */
     clearData(): void;
+    setOverlapMode(mode: OverlapMode): void;
     /*********************************************************
      * LogicFlow Render方法
      ********************************************************/

package/lib/LogicFlow.js

@@ -962,6 +962,9 @@ var LogicFlow = /** @class */ (function () {
         // 强制刷新数据, 让 preact 清除对已删除节点的引用
         this.render({});
     };
+    LogicFlow.prototype.setOverlapMode = function (mode) {
+        this.graphModel.setOverlapMode(mode);
+    };
     /*********************************************************
      * LogicFlow Render方法
      ********************************************************/

package/lib/constant/index.d.ts

@@ -134,8 +134,10 @@ export declare enum EventType {
     EDIT_CONFIG_CHANGED = "editConfig:changed"
 }
 export declare enum OverlapMode {
+    STATIC = -1,// 静态(元素层级不随点击变化)
     DEFAULT = 0,// 默认
-    INCREASE = 1
+    INCREASE = 1,// 递增
+    EDGE_TOP = 2
 }
 export declare enum SegmentDirection {
     HORIZONTAL = "horizontal",

package/lib/constant/index.js

@@ -152,8 +152,10 @@ var EventType;
 })(EventType || (exports.EventType = EventType = {}));
 var OverlapMode;
 (function (OverlapMode) {
+    OverlapMode[OverlapMode["STATIC"] = -1] = "STATIC";
     OverlapMode[OverlapMode["DEFAULT"] = 0] = "DEFAULT";
     OverlapMode[OverlapMode["INCREASE"] = 1] = "INCREASE";
+    OverlapMode[OverlapMode["EDGE_TOP"] = 2] = "EDGE_TOP";
 })(OverlapMode || (exports.OverlapMode = OverlapMode = {}));
 var SegmentDirection;
 (function (SegmentDirection) {

package/lib/model/EditConfigModel.d.ts

@@ -114,6 +114,7 @@ export interface IEditConfigType {
     nodeTextMode: TextMode;
     edgeTextMode: TextMode;
     snapGrid: boolean;
+    isPinching: boolean;
 }
 export type IConfigKeys = keyof IEditConfigType;
 /**
@@ -129,6 +130,7 @@ export declare class EditConfigModel {
     stopMoveGraph: boolean;
     stopScrollGraph: boolean;
     snapGrid: boolean;
+    isPinching: boolean;
     /*********************************************************
      * 文本相关配置（全局）
      ********************************************************/
@@ -170,7 +172,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">;
     updateTextMode(textMode: TextMode): void;
     getConfig(): IEditConfigType;
 }

package/lib/model/EditConfigModel.js

@@ -65,6 +65,7 @@ var allKeys = [
     'edgeTextMultiple', // 是否支持多个边文本
     'nodeTextVertical', // 节点文本是否纵向显示
     'edgeTextVertical', // 边文本是否纵向显示
+    'isPinching', //是否是双指捏合态
 ];
 /**
  * 页面编辑配置
@@ -79,6 +80,7 @@ var EditConfigModel = /** @class */ (function () {
         this.stopMoveGraph = false;
         this.stopScrollGraph = false;
         this.snapGrid = false;
+        this.isPinching = false;
         /*********************************************************
          * 文本相关配置（全局）
          ********************************************************/
@@ -196,6 +198,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);

package/lib/model/GraphModel.d.ts

@@ -179,6 +179,14 @@ export declare class GraphModel {
      * @param model
      */
     getTextModel(model: BaseNodeModel): TextMode | undefined;
+    /**
+     * 内部保留方法，请勿直接使用
+     */
+    /**
+     * 设置重叠模式
+     * @param mode 重叠模式
+     */
+    setOverlapMode(mode: OverlapMode): void;
     /**
      * 更新元素的文本模式
      * @param mode
@@ -449,7 +457,7 @@ export declare class GraphModel {
      */
     clearData(): void;
     /**
-     * 获取图形区域虚拟矩型的尺寸和中心坐标
+     * 获取图形区域虚拟矩形的尺寸和中心坐标
      * @returns
      */
     getVirtualRectSize(): GraphModel.VirtualRectProps;