@logicflow/extension 2.1.6 → 2.2.0-alpha.1

package/lib/insert-node-in-polyline/index.js

@@ -1,29 +1,4 @@
 "use strict";
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InsertNodeInPolyline = void 0;
 var core_1 = require("@logicflow/core");
@@ -116,28 +91,29 @@ var InsertNodeInPolyline = /** @class */ (function () {
                 var _b = edges[i], sourceNodeId = _b.sourceNodeId, targetNodeId = _b.targetNodeId, id = _b.id, type = _b.type, pointsList = _b.pointsList, sourceAnchorId = _b.sourceAnchorId, targetAnchorId = _b.targetAnchorId;
                 // fix https://github.com/didi/LogicFlow/issues/996
                 var startPoint = (0, lodash_es_1.cloneDeep)(pointsList[0]);
-                var endPoint = (0, lodash_es_1.cloneDeep)(crossPoints.startCrossPoint);
                 this._lf.deleteEdge(id);
                 var checkResult = this.checkRuleBeforeInsetNode(sourceNodeId, targetNodeId, sourceAnchorId, targetAnchorId, nodeData);
+                // 基于插入节点的进入交点计算出最近的“进入锚点”，用于重连原边的前半段
+                var entryAnchorInfo = (0, core_1.getClosestAnchor)(crossPoints.startCrossPoint, nodeModel);
+                var entryAnchor = entryAnchorInfo.anchor;
+                // 构造第一条边：原 source → 插入节点（终点为进入锚点）
                 this._lf.addEdge({
                     type: type,
                     sourceNodeId: sourceNodeId,
                     targetNodeId: nodeData.id,
                     startPoint: startPoint,
-                    endPoint: endPoint,
-                    pointsList: __spreadArray(__spreadArray([], __read(pointsList.slice(0, crossIndex)), false), [
-                        crossPoints.startCrossPoint,
-                    ], false),
+                    endPoint: entryAnchor,
                 });
+                // 基于插入节点的离开交点计算出最近的“离开锚点”，用于重连原边的后半段
+                var exitAnchorInfo = (0, core_1.getClosestAnchor)(crossPoints.endCrossPoint, nodeModel);
+                var exitAnchor = exitAnchorInfo.anchor;
+                // 构造第二条边：插入节点 → 原 target（起点为离开锚点）
                 this._lf.addEdge({
                     type: type,
                     sourceNodeId: nodeData.id,
                     targetNodeId: targetNodeId,
-                    startPoint: (0, lodash_es_1.cloneDeep)(crossPoints.endCrossPoint),
+                    startPoint: (0, lodash_es_1.cloneDeep)(exitAnchor),
                     endPoint: (0, lodash_es_1.cloneDeep)(pointsList[pointsList.length - 1]),
-                    pointsList: __spreadArray([
-                        crossPoints.endCrossPoint
-                    ], __read(pointsList.slice(crossIndex)), false),
                 });
                 if (!checkResult.isPass) {
                     this._lf.graphModel.eventCenter.emit(core_1.EventType.CONNECTION_NOT_ALLOWED, {

package/lib/tools/label/Label.d.ts

@@ -17,8 +17,8 @@ export declare class Label extends Component<ILabelProps, ILabelState> {
     constructor(props: ILabelProps);
     setHoverOn: () => void;
     setHoverOff: () => void;
-    handleMouseDown: (e: MouseEvent) => void;
-    handleMouseUp: (e: MouseEvent) => void;
+    handleMouseDown: (e: PointerEvent) => void;
+    handleMouseUp: (e: PointerEvent) => void;
     handleDragging: ({ deltaX, deltaY }: IDragParams) => void;
     handleDragEnd: () => void;
     handleClick: (e: MouseEvent) => void;

package/lib/tools/label/Label.js

@@ -280,7 +280,7 @@ var Label = /** @class */ (function (_super) {
                 ? "".concat(transform, " rotate(").concat(rotate, "deg)")
                 : "".concat(transform, " rotate(").concat(vertical ? -0.25 : 0, "turn)"),
         };
-        return ((0, jsx_runtime_1.jsx)("div", { id: "element-container-".concat(id), className: (0, classnames_1.default)('lf-label-editor-container'), style: containerStyle, onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp, onClick: this.handleClick, onDblClick: this.handleDbClick, onBlur: this.handleBlur, onMouseEnter: this.setHoverOn, onMouseOver: this.setHoverOn, onMouseLeave: this.setHoverOff, children: (0, jsx_runtime_1.jsx)("div", { ref: this.textRef, id: "editor-container-".concat(id), className: (0, classnames_1.default)('lf-label-editor', (_a = {
+        return ((0, jsx_runtime_1.jsx)("div", { id: "element-container-".concat(id), className: (0, classnames_1.default)('lf-label-editor-container'), style: containerStyle, onPointerDown: this.handleMouseDown, onPointerUp: this.handleMouseUp, onClick: this.handleClick, onDblClick: this.handleDbClick, onBlur: this.handleBlur, onMouseEnter: this.setHoverOn, onMouseOver: this.setHoverOn, onMouseLeave: this.setHoverOff, children: (0, jsx_runtime_1.jsx)("div", { ref: this.textRef, id: "editor-container-".concat(id), className: (0, classnames_1.default)('lf-label-editor', (_a = {
                         'lf-label-editor-dragging': isDragging,
                         'lf-label-editor-editing': isEditing,
                         'lf-label-editor-hover': !isEditing && (isHovered || isSelected)

package/lib/tools/label/LabelOverlay.js

@@ -80,7 +80,7 @@ var LabelOverlay = /** @class */ (function (_super) {
         this.editor = new mediumEditor_1.MediumEditor('.lf-label-editor', (0, lodash_es_1.merge)(mediumEditor_1.defaultOptions, {
             autoLink: true,
             extensions: {
-                colorPicker: new mediumEditor_1.ColorPickerButton(),
+                colorPicker: new ((0, mediumEditor_1.createColorPickerButtonClass)(mediumEditor_1.MediumEditor))(),
             },
         }));
         // TODO: 2. 在此处监听一些事件，当 node、edge 数据变化时，主动触发重新渲染，保证同步更新
@@ -105,7 +105,7 @@ var LabelOverlay = /** @class */ (function (_super) {
             this.editor = new mediumEditor_1.MediumEditor('.lf-label-editor', (0, lodash_es_1.merge)(mediumEditor_1.defaultOptions, {
                 autoLink: true,
                 extensions: {
-                    colorPicker: new mediumEditor_1.ColorPickerButton(),
+                    colorPicker: new ((0, mediumEditor_1.createColorPickerButtonClass)(mediumEditor_1.MediumEditor))(),
                 },
             }));
         }

package/lib/tools/label/mediumEditor.d.ts

@@ -13,5 +13,5 @@ export declare const defaultOptions: {
     };
     disableEditing: boolean;
 };
-export declare const ColorPickerButton: any;
+export declare function createColorPickerButtonClass(MediumEditor?: any): any;
 export { MediumEditor };

package/lib/tools/label/mediumEditor.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MediumEditor = exports.ColorPickerButton = exports.defaultOptions = void 0;
+exports.MediumEditor = exports.createColorPickerButtonClass = exports.defaultOptions = void 0;
 var medium_editor_1 = __importDefault(require("medium-editor"));
 exports.MediumEditor = medium_editor_1.default;
 var vanilla_picker_1 = __importDefault(require("vanilla-picker"));
@@ -43,55 +43,93 @@ exports.defaultOptions = {
     },
     disableEditing: true,
 };
-exports.ColorPickerButton = medium_editor_1.default.extensions.button.extend({
-    name: 'colorpicker',
-    tagNames: ['mark'],
-    contentDefault: '<b>Color</b>',
-    aria: 'Color Picker',
-    action: 'colorPicker',
-    init: function () {
-        var _this = this;
-        rangy_1.default.init();
-        medium_editor_1.default.extensions.button.prototype.init.call(this);
-        this.colorPicker = new vanilla_picker_1.default({
-            parent: this.button,
-            color: '#000',
-            onDone: function (res) {
-                if (_this.coloredText && _this.coloredText.isAppliedToSelection()) {
-                    _this.coloredText.undoToSelection();
-                }
-                _this.coloredText = rangy_1.default.createClassApplier('colored', {
-                    elementTagName: 'span',
-                    elementProperties: {
-                        style: {
-                            color: res.hex,
-                        },
-                    },
-                    normalize: true,
-                });
-                _this.coloredText.toggleSelection();
-                _this.base.checkContentChanged();
-                _this.setInactive();
-            },
-        });
-    },
-    getButton: function () {
-        return this.button;
-    },
-    handleClick: function () {
-        this.setActive();
-        this.colorPicker.show();
-    },
-    isAlreadyApplied: function (node) {
-        return node.nodeName.toLowerCase() === 'mark';
-    },
-    isActive: function () {
-        return this.button.classList.contains('medium-editor-button-active');
-    },
-    setInactive: function () {
-        this.button.classList.remove('medium-editor-button-active');
-    },
-    setActive: function () {
-        this.button.classList.add('medium-editor-button-active');
-    },
-});
+function createColorPickerButtonClass(MediumEditor) {
+    var _a, _b;
+    var ButtonBase = ((_a = MediumEditor === null || MediumEditor === void 0 ? void 0 : MediumEditor.extensions) === null || _a === void 0 ? void 0 : _a.button) || ((_b = MediumEditor === null || MediumEditor === void 0 ? void 0 : MediumEditor.extensions) === null || _b === void 0 ? void 0 : _b.button);
+    var ExtensionBase = (MediumEditor === null || MediumEditor === void 0 ? void 0 : MediumEditor.Extension) || (MediumEditor === null || MediumEditor === void 0 ? void 0 : MediumEditor.Extension);
+    // 当 Button 扩展基类不可用时，回退到 Extension 基类，避免在模块加载阶段抛错
+    var Base = ButtonBase || ExtensionBase;
+    if (!Base) {
+        console.warn('MediumEditor button/extension base not available; using noop extension');
+        return /** @class */ (function () {
+            function class_1() {
+            }
+            return class_1;
+        }());
+    }
+    return Base.extend({
+        name: 'colorpicker',
+        tagNames: ['mark'],
+        contentDefault: '<b>Color</b>',
+        aria: 'Color Picker',
+        action: 'colorPicker',
+        init: function () {
+            var _this = this;
+            var _a, _b;
+            try {
+                rangy_1.default.init();
+            }
+            catch (_c) {
+                console.error('rangy.init failed');
+            }
+            // 初始化按钮（ButtonBase 才有 prototype.init）
+            try {
+                ;
+                (_b = (_a = ButtonBase === null || ButtonBase === void 0 ? void 0 : ButtonBase.prototype) === null || _a === void 0 ? void 0 : _a.init) === null || _b === void 0 ? void 0 : _b.call(this);
+            }
+            catch (_d) {
+                console.error('ButtonBase.init failed');
+            }
+            this.colorPicker = new vanilla_picker_1.default({
+                parent: this.button || undefined,
+                color: '#000',
+                onDone: function (res) {
+                    var _a, _b, _c, _d, _e;
+                    try {
+                        if (_this.coloredText && ((_b = (_a = _this.coloredText).isAppliedToSelection) === null || _b === void 0 ? void 0 : _b.call(_a))) {
+                            _this.coloredText.undoToSelection();
+                        }
+                        _this.coloredText = rangy_1.default.createClassApplier('colored', {
+                            elementTagName: 'span',
+                            elementProperties: { style: { color: res.hex } },
+                            normalize: true,
+                        });
+                        _this.coloredText.toggleSelection();
+                        (_d = (_c = _this.base) === null || _c === void 0 ? void 0 : _c.checkContentChanged) === null || _d === void 0 ? void 0 : _d.call(_c);
+                        (_e = _this.setInactive) === null || _e === void 0 ? void 0 : _e.call(_this);
+                    }
+                    catch (_f) {
+                        console.error('Picker.onDone failed');
+                    }
+                },
+            });
+        },
+        getButton: function () {
+            return this.button;
+        },
+        handleClick: function () {
+            var _a, _b, _c;
+            (_a = this.setActive) === null || _a === void 0 ? void 0 : _a.call(this);
+            (_c = (_b = this.colorPicker) === null || _b === void 0 ? void 0 : _b.show) === null || _c === void 0 ? void 0 : _c.call(_b);
+        },
+        isAlreadyApplied: function (node) {
+            var _a, _b;
+            return ((_b = (_a = node === null || node === void 0 ? void 0 : node.nodeName) === null || _a === void 0 ? void 0 : _a.toLowerCase) === null || _b === void 0 ? void 0 : _b.call(_a)) === 'mark';
+        },
+        isActive: function () {
+            var _a, _b;
+            return (_b = (_a = this.button) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.contains('medium-editor-button-active');
+        },
+        setInactive: function () {
+            var _a, _b;
+            ;
+            (_b = (_a = this.button) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.remove('medium-editor-button-active');
+        },
+        setActive: function () {
+            var _a, _b;
+            ;
+            (_b = (_a = this.button) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.add('medium-editor-button-active');
+        },
+    });
+}
+exports.createColorPickerButtonClass = createColorPickerButtonClass;

package/lib/tools/snapshot/index.js

@@ -669,7 +669,7 @@ var Snapshot = /** @class */ (function () {
     // 内部方法处理blob转换
     Snapshot.prototype.snapshotBlob = function (toImageOptions, baseFileType, backgroundColor) {
         return __awaiter(this, void 0, void 0, function () {
-            var _a, fileType, svg;
+            var _a, fileType, svg, copy, svgString, blob;
             var _this = this;
             return __generator(this, function (_b) {
                 switch (_b.label) {
@@ -679,18 +679,31 @@ var Snapshot = /** @class */ (function () {
                         return [4 /*yield*/, (0, utils_1.updateImageSource)(svg)];
                     case 1:
                         _b.sent();
-                        return [2 /*return*/, new Promise(function (resolve) {
-                                _this.getCanvasData(svg, __assign({ backgroundColor: backgroundColor }, (toImageOptions !== null && toImageOptions !== void 0 ? toImageOptions : {}))).then(function (canvas) {
-                                    canvas.toBlob(function (blob) {
-                                        // 输出图片数据以及图片宽高
-                                        resolve({
-                                            data: blob,
-                                            width: canvas.width,
-                                            height: canvas.height,
-                                        });
-                                    }, "image/".concat(fileType !== null && fileType !== void 0 ? fileType : 'png'));
-                                });
-                            })];
+                        if (!(fileType === 'svg')) return [3 /*break*/, 3];
+                        return [4 /*yield*/, this.cloneSvg(svg)];
+                    case 2:
+                        copy = _b.sent();
+                        svgString = new XMLSerializer().serializeToString(copy);
+                        blob = new Blob([svgString], {
+                            type: 'image/svg+xml;charset=utf-8',
+                        });
+                        return [2 /*return*/, {
+                                data: blob,
+                                width: 0,
+                                height: 0,
+                            }];
+                    case 3: return [2 /*return*/, new Promise(function (resolve) {
+                            _this.getCanvasData(svg, __assign({ backgroundColor: backgroundColor }, (toImageOptions !== null && toImageOptions !== void 0 ? toImageOptions : {}))).then(function (canvas) {
+                                canvas.toBlob(function (blob) {
+                                    // 输出图片数据以及图片宽高
+                                    resolve({
+                                        data: blob,
+                                        width: canvas.width,
+                                        height: canvas.height,
+                                    });
+                                }, "image/".concat(fileType !== null && fileType !== void 0 ? fileType : 'png'));
+                            });
+                        })];
                 }
             });
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logicflow/extension",
-  "version": "2.1.6",
+  "version": "2.2.0-alpha.1",
   "description": "LogicFlow Extensions",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -20,8 +20,8 @@
   "author": "Logicflow-Team",
   "license": "Apache-2.0",
   "peerDependencies": {
-    "@logicflow/core": "2.1.4",
-    "@logicflow/vue-node-registry": "1.1.5"
+    "@logicflow/vue-node-registry": "1.2.0-alpha.1",
+    "@logicflow/core": "2.2.0-alpha.1"
   },
   "dependencies": {
     "@antv/hierarchy": "^0.6.11",
@@ -32,8 +32,8 @@
     "preact": "^10.17.1",
     "rangy": "^1.3.1",
     "vanilla-picker": "^2.12.3",
-    "@logicflow/core": "2.1.4",
-    "@logicflow/vue-node-registry": "1.1.5"
+    "@logicflow/core": "2.2.0-alpha.1",
+    "@logicflow/vue-node-registry": "1.2.0-alpha.1"
   },
   "devDependencies": {
     "less": "^4.1.1",

package/src/components/dnd-panel/index.ts

@@ -36,6 +36,13 @@ export class DndPanel {
     }
     this.panelEl = document.createElement('div')
     this.panelEl.className = 'lf-dndpanel'
+    this.panelEl.addEventListener(
+      'touchmove',
+      (e) => {
+        e.preventDefault()
+      },
+      { passive: false },
+    )
     this.shapeList.forEach((shapeItem) => {
       this.panelEl?.appendChild(this.createDndItem(shapeItem))
     })
@@ -85,14 +92,14 @@ export class DndPanel {
     if (shapeItem.disabled) {
       el.classList.add('disabled')
       // 保留callback的执行，可用于界面提示当前shapeItem的禁用状态
-      el.onmousedown = () => {
+      el.onpointerdown = () => {
         if (shapeItem.callback) {
           shapeItem.callback(this.lf, this.domContainer)
         }
       }
       return el
     }
-    el.onmousedown = () => {
+    el.onpointerdown = (e: PointerEvent) => {
       if (shapeItem.type) {
         this.lf.dnd.startDrag({
           type: shapeItem.type,
@@ -103,6 +110,7 @@ export class DndPanel {
       if (shapeItem.callback) {
         shapeItem.callback(this.lf, this.domContainer)
       }
+      e.preventDefault()
     }
     el.ondblclick = (e) => {
       this.lf.graphModel.eventCenter.emit('dnd:panel-dbclick', {

package/src/components/menu/index.ts

@@ -603,7 +603,6 @@ class Menu {
     if (lf.graphModel.editConfigModel.isSilentMode) return
     this.__container = container
     this.__currentData = null // 当前展示的菜单所属元素的model数据
-
     // 监听 isSilentMode 变化
     this.setupSilentModeListener()
 

package/src/components/mini-map/index.ts

@@ -616,8 +616,8 @@ export class MiniMap {
     const div = document.createElement('div')
     div.className = 'lf-minimap-viewport'
 
-    // 拖拽预览视窗，主画布视口跟随移动
-    div.addEventListener('mousedown', this.startDrag)
+    div.style.touchAction = 'none'
+    div.addEventListener('pointerdown', this.startDrag)
 
     // 禁止预览视窗的点击事件冒泡
     div.addEventListener('click', (e: MouseEvent) => {
@@ -626,9 +626,9 @@ export class MiniMap {
     this.viewport = div
   }
 
-  private startDrag = (e: MouseEvent) => {
-    document.addEventListener('mousemove', this.drag)
-    document.addEventListener('mouseup', this.drop)
+  private startDrag = (e: PointerEvent) => {
+    document.addEventListener('pointermove', this.drag)
+    document.addEventListener('pointerup', this.drop)
     const { x, y } = e
     this.startPosition = { x, y }
   }
@@ -636,7 +636,7 @@ export class MiniMap {
   /**
    * 拖拽预览视窗过程中，更新主画布视口
    */
-  private drag = (e: MouseEvent) => {
+  private drag = (e: PointerEvent) => {
     const { x, y } = e
     const translateX = (x - this.startPosition.x) / this.scale
     const translateY = (y - this.startPosition.y) / this.scale
@@ -659,8 +659,8 @@ export class MiniMap {
    * 拖拽预览视窗结束，移除拖拽事件
    */
   private drop = () => {
-    document.removeEventListener('mousemove', this.drag)
-    document.removeEventListener('mouseup', this.drop)
+    document.removeEventListener('pointermove', this.drag)
+    document.removeEventListener('pointerup', this.drop)
   }
 
   /**

package/src/components/selection-select/index.ts

@@ -76,8 +76,8 @@ export class SelectionSelect {
     this.mouseDownInfo = null
 
     // 移除事件监听
-    document.removeEventListener('mousemove', this.draw)
-    document.removeEventListener('mouseup', this.drawOff)
+    document.removeEventListener('pointermove', this.draw)
+    document.removeEventListener('pointerup', this.drawOff)
   }
 
   /**
@@ -101,7 +101,8 @@ export class SelectionSelect {
     if (this.exclusiveMode) {
       // 独占模式：监听 container 的 mousedown 事件
       this.container.style.pointerEvents = 'auto'
-      this.container.addEventListener('mousedown', this.handleMouseDown)
+      this.container.style.touchAction = 'none'
+      this.container.addEventListener('pointerdown', this.handleMouseDown)
     } else {
       // 非独占模式：监听画布的 blank:mousedown 事件
       this.container.style.pointerEvents = 'none'
@@ -113,7 +114,7 @@ export class SelectionSelect {
   private removeEventListeners() {
     if (this.container) {
       this.container.style.pointerEvents = 'none'
-      this.container.removeEventListener('mousedown', this.handleMouseDown)
+      this.container.removeEventListener('pointerdown', this.handleMouseDown)
     }
     // 移除 blank:mousedown 事件监听
     this.lf.off('blank:mousedown', this.handleBlankMouseDown)
@@ -122,15 +123,16 @@ export class SelectionSelect {
   /**
    * 处理画布空白处鼠标按下事件（非独占模式）
    */
-  private handleBlankMouseDown = ({ e }: { e: MouseEvent }) => {
-    this.handleMouseDown(e)
+  private handleBlankMouseDown = ({ e }: { e: MouseEvent | PointerEvent }) => {
+    this.handleMouseDown(e as PointerEvent)
   }
 
   /**
    * 处理鼠标按下事件
    */
-  private handleMouseDown(e: MouseEvent) {
+  private handleMouseDown(e: PointerEvent) {
     if (!this.container || this.disabled) return
+    if (this.lf.graphModel.editConfigModel.isPinching) return
 
     // 禁用右键框选
     const isRightClick = e.button === 2
@@ -170,8 +172,8 @@ export class SelectionSelect {
     this.container?.appendChild(wrapper)
     this.wrapper = wrapper
 
-    document.addEventListener('mousemove', this.draw)
-    document.addEventListener('mouseup', this.drawOff)
+    document.addEventListener('pointermove', this.draw)
+    document.addEventListener('pointerup', this.drawOff)
   }
 
   /**
@@ -210,7 +212,7 @@ export class SelectionSelect {
     if (this.wrapper && this.startPoint && this.endPoint) {
       // 记录上一次的结束点，用于触发 mouseup 事件
       const lastEndPoint = cloneDeep(this.endPoint)
-      const lastEvent = new MouseEvent('mouseup', {
+      const lastEvent = new PointerEvent('pointerup', {
         clientX: lastEndPoint.x,
         clientY: lastEndPoint.y,
       })
@@ -221,7 +223,13 @@ export class SelectionSelect {
     this.close()
   }
 
-  private draw = (ev: MouseEvent) => {
+  private draw = (ev: PointerEvent) => {
+    if (this.lf.graphModel.editConfigModel.isPinching) {
+      this.lf.updateEditConfig({ stopMoveGraph: this.originalStopMoveGraph })
+      this.originStatusSaved = false
+      this.cleanupSelectionState()
+      return
+    }
     const {
       domOverlayPosition: { x: x1, y: y1 },
     } = this.lf.getPointByClient(ev.clientX, ev.clientY)
@@ -251,7 +259,7 @@ export class SelectionSelect {
       }
     }
   }
-  private drawOff = (e: MouseEvent) => {
+  private drawOff = (e: PointerEvent) => {
     // 恢复原始的 stopMoveGraph 设置
     this.lf.updateEditConfig({
       stopMoveGraph: this.originalStopMoveGraph,
@@ -274,9 +282,9 @@ export class SelectionSelect {
 
     const curStartPoint = cloneDeep(this.startPoint)
     const curEndPoint = cloneDeep(this.endPoint)
-    document.removeEventListener('mousemove', this.draw)
+    document.removeEventListener('pointermove', this.draw)
     if (!this.exclusiveMode) {
-      document.removeEventListener('mouseup', this.drawOff)
+      document.removeEventListener('pointerup', this.drawOff)
     }
 
     if (curStartPoint && curEndPoint) {

package/src/insert-node-in-polyline/index.ts

@@ -3,6 +3,7 @@ import LogicFlow, {
   PolylineEdgeModel,
   EventType,
   formatAnchorConnectValidateData,
+  getClosestAnchor,
 } from '@logicflow/core'
 import { cloneDeep } from 'lodash-es'
 import { isNodeInSegment } from './edge'
@@ -132,7 +133,6 @@ export class InsertNodeInPolyline {
         } = edges[i]
         // fix https://github.com/didi/LogicFlow/issues/996
         const startPoint = cloneDeep(pointsList[0])
-        const endPoint = cloneDeep(crossPoints.startCrossPoint)
         this._lf.deleteEdge(id)
         const checkResult = this.checkRuleBeforeInsetNode(
           sourceNodeId,
@@ -141,27 +141,33 @@ export class InsertNodeInPolyline {
           targetAnchorId!,
           nodeData,
         )
+        // 基于插入节点的进入交点计算出最近的“进入锚点”，用于重连原边的前半段
+        const entryAnchorInfo = getClosestAnchor(
+          crossPoints.startCrossPoint,
+          nodeModel,
+        )
+        const entryAnchor = entryAnchorInfo.anchor
+        // 构造第一条边：原 source → 插入节点（终点为进入锚点）
         this._lf.addEdge({
           type,
           sourceNodeId,
           targetNodeId: nodeData.id,
           startPoint,
-          endPoint,
-          pointsList: [
-            ...pointsList.slice(0, crossIndex),
-            crossPoints.startCrossPoint,
-          ],
+          endPoint: entryAnchor,
         })
+        // 基于插入节点的离开交点计算出最近的“离开锚点”，用于重连原边的后半段
+        const exitAnchorInfo = getClosestAnchor(
+          crossPoints.endCrossPoint,
+          nodeModel,
+        )
+        const exitAnchor = exitAnchorInfo.anchor
+        // 构造第二条边：插入节点 → 原 target（起点为离开锚点）
         this._lf.addEdge({
           type,
           sourceNodeId: nodeData.id,
           targetNodeId,
-          startPoint: cloneDeep(crossPoints.endCrossPoint),
+          startPoint: cloneDeep(exitAnchor),
           endPoint: cloneDeep(pointsList[pointsList.length - 1]),
-          pointsList: [
-            crossPoints.endCrossPoint,
-            ...pointsList.slice(crossIndex),
-          ],
         })
         if (!checkResult.isPass) {
           this._lf.graphModel.eventCenter.emit(

package/src/tools/label/Label.tsx

@@ -72,7 +72,7 @@ export class Label extends Component<ILabelProps, ILabelState> {
     element.setHovered(false)
   }
 
-  handleMouseDown = (e: MouseEvent) => {
+  handleMouseDown = (e: PointerEvent) => {
     const { label, graphModel } = this.props
     const {
       editConfigModel: { nodeTextDraggable },
@@ -86,7 +86,7 @@ export class Label extends Component<ILabelProps, ILabelState> {
       this.stepDrag.handleMouseDown(e)
     }
   }
-  handleMouseUp = (e: MouseEvent) => {
+  handleMouseUp = (e: PointerEvent) => {
     if (this.state.isDragging) {
       this.stepDrag.handleMouseUp(e)
     }
@@ -320,8 +320,8 @@ export class Label extends Component<ILabelProps, ILabelState> {
         id={`element-container-${id}`}
         className={classNames('lf-label-editor-container')}
         style={containerStyle}
-        onMouseDown={this.handleMouseDown}
-        onMouseUp={this.handleMouseUp}
+        onPointerDown={this.handleMouseDown}
+        onPointerUp={this.handleMouseUp}
         onClick={this.handleClick}
         onDblClick={this.handleDbClick}
         onBlur={this.handleBlur}