@logicflow/extension 2.1.6 → 2.2.0-alpha.1

package/es/components/dnd-panel/index.js

@@ -17,6 +17,9 @@ var DndPanel = /** @class */ (function () {
         }
         this.panelEl = document.createElement('div');
         this.panelEl.className = 'lf-dndpanel';
+        this.panelEl.addEventListener('touchmove', function (e) {
+            e.preventDefault();
+        }, { passive: false });
         this.shapeList.forEach(function (shapeItem) {
             var _a;
             (_a = _this.panelEl) === null || _a === void 0 ? void 0 : _a.appendChild(_this.createDndItem(shapeItem));
@@ -63,14 +66,14 @@ var DndPanel = /** @class */ (function () {
         if (shapeItem.disabled) {
             el.classList.add('disabled');
             // 保留callback的执行，可用于界面提示当前shapeItem的禁用状态
-            el.onmousedown = function () {
+            el.onpointerdown = function () {
                 if (shapeItem.callback) {
                     shapeItem.callback(_this.lf, _this.domContainer);
                 }
             };
             return el;
         }
-        el.onmousedown = function () {
+        el.onpointerdown = function (e) {
             if (shapeItem.type) {
                 _this.lf.dnd.startDrag({
                     type: shapeItem.type,
@@ -81,6 +84,7 @@ var DndPanel = /** @class */ (function () {
             if (shapeItem.callback) {
                 shapeItem.callback(_this.lf, _this.domContainer);
             }
+            e.preventDefault();
         };
         el.ondblclick = function (e) {
             _this.lf.graphModel.eventCenter.emit('dnd:panel-dbclick', {

package/es/components/mini-map/index.js

@@ -179,8 +179,8 @@ var MiniMap = /** @class */ (function () {
             }
         };
         this.startDrag = function (e) {
-            document.addEventListener('mousemove', _this.drag);
-            document.addEventListener('mouseup', _this.drop);
+            document.addEventListener('pointermove', _this.drag);
+            document.addEventListener('pointerup', _this.drop);
             var x = e.x, y = e.y;
             _this.startPosition = { x: x, y: y };
         };
@@ -206,8 +206,8 @@ var MiniMap = /** @class */ (function () {
          * 拖拽预览视窗结束，移除拖拽事件
          */
         this.drop = function () {
-            document.removeEventListener('mousemove', _this.drag);
-            document.removeEventListener('mouseup', _this.drop);
+            document.removeEventListener('pointermove', _this.drag);
+            document.removeEventListener('pointerup', _this.drop);
         };
         /**
          * 点击小地图中非预览视窗的区域时，移动主画布视口聚焦于点击位置
@@ -513,8 +513,8 @@ var MiniMap = /** @class */ (function () {
     MiniMap.prototype.createViewPort = function () {
         var 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', function (e) {
             e.stopPropagation();

package/es/components/selection-select/index.js

@@ -46,6 +46,12 @@ var SelectionSelect = /** @class */ (function () {
             _this.handleMouseDown(e);
         };
         this.draw = function (ev) {
+            if (_this.lf.graphModel.editConfigModel.isPinching) {
+                _this.lf.updateEditConfig({ stopMoveGraph: _this.originalStopMoveGraph });
+                _this.originStatusSaved = false;
+                _this.cleanupSelectionState();
+                return;
+            }
             var _a = _this.lf.getPointByClient(ev.clientX, ev.clientY).domOverlayPosition, x1 = _a.x, y1 = _a.y;
             _this.endPoint = {
                 x: x1,
@@ -94,9 +100,9 @@ var SelectionSelect = /** @class */ (function () {
             }
             var curStartPoint = cloneDeep(_this.startPoint);
             var 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) {
                 var x = curStartPoint.x, y = curStartPoint.y;
@@ -210,8 +216,8 @@ var SelectionSelect = /** @class */ (function () {
         this.endPoint = undefined;
         this.mouseDownInfo = null;
         // 移除事件监听
-        document.removeEventListener('mousemove', this.draw);
-        document.removeEventListener('mouseup', this.drawOff);
+        document.removeEventListener('pointermove', this.draw);
+        document.removeEventListener('pointerup', this.drawOff);
     };
     /**
      * 切换框选模式
@@ -235,7 +241,8 @@ var SelectionSelect = /** @class */ (function () {
         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 事件
@@ -247,7 +254,7 @@ var SelectionSelect = /** @class */ (function () {
     SelectionSelect.prototype.removeEventListeners = function () {
         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);
@@ -259,6 +266,8 @@ var SelectionSelect = /** @class */ (function () {
         var _a;
         if (!this.container || this.disabled)
             return;
+        if (this.lf.graphModel.editConfigModel.isPinching)
+            return;
         // 禁用右键框选
         var isRightClick = e.button === 2;
         if (isRightClick)
@@ -292,8 +301,8 @@ var SelectionSelect = /** @class */ (function () {
         wrapper.style.left = "".concat(this.startPoint.x, "px");
         (_a = this.container) === null || _a === void 0 ? void 0 : _a.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);
     };
     /**
      * 设置选中的灵敏度
@@ -331,7 +340,7 @@ var SelectionSelect = /** @class */ (function () {
         if (this.wrapper && this.startPoint && this.endPoint) {
             // 记录上一次的结束点，用于触发 mouseup 事件
             var lastEndPoint = cloneDeep(this.endPoint);
-            var lastEvent = new MouseEvent('mouseup', {
+            var lastEvent = new PointerEvent('pointerup', {
                 clientX: lastEndPoint.x,
                 clientY: lastEndPoint.y,
             });

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

@@ -1,29 +1,4 @@
-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));
-};
-import { EventType, formatAnchorConnectValidateData, } from '@logicflow/core';
+import { EventType, formatAnchorConnectValidateData, getClosestAnchor, } from '@logicflow/core';
 import { cloneDeep } from 'lodash-es';
 import { isNodeInSegment } from './edge';
 var InsertNodeInPolyline = /** @class */ (function () {
@@ -113,28 +88,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 = cloneDeep(pointsList[0]);
-                var endPoint = cloneDeep(crossPoints.startCrossPoint);
                 this._lf.deleteEdge(id);
                 var checkResult = this.checkRuleBeforeInsetNode(sourceNodeId, targetNodeId, sourceAnchorId, targetAnchorId, nodeData);
+                // 基于插入节点的进入交点计算出最近的“进入锚点”，用于重连原边的前半段
+                var entryAnchorInfo = 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 = getClosestAnchor(crossPoints.endCrossPoint, nodeModel);
+                var exitAnchor = exitAnchorInfo.anchor;
+                // 构造第二条边：插入节点 → 原 target（起点为离开锚点）
                 this._lf.addEdge({
                     type: type,
                     sourceNodeId: nodeData.id,
                     targetNodeId: targetNodeId,
-                    startPoint: cloneDeep(crossPoints.endCrossPoint),
+                    startPoint: cloneDeep(exitAnchor),
                     endPoint: cloneDeep(pointsList[pointsList.length - 1]),
-                    pointsList: __spreadArray([
-                        crossPoints.endCrossPoint
-                    ], __read(pointsList.slice(crossIndex)), false),
                 });
                 if (!checkResult.isPass) {
                     this._lf.graphModel.eventCenter.emit(EventType.CONNECTION_NOT_ALLOWED, {

package/es/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/es/tools/label/Label.js

@@ -274,7 +274,7 @@ var Label = /** @class */ (function (_super) {
                 ? "".concat(transform, " rotate(").concat(rotate, "deg)")
                 : "".concat(transform, " rotate(").concat(vertical ? -0.25 : 0, "turn)"),
         };
-        return (_jsx("div", { id: "element-container-".concat(id), className: classNames('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: _jsx("div", { ref: this.textRef, id: "editor-container-".concat(id), className: classNames('lf-label-editor', (_a = {
+        return (_jsx("div", { id: "element-container-".concat(id), className: classNames('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: _jsx("div", { ref: this.textRef, id: "editor-container-".concat(id), className: classNames('lf-label-editor', (_a = {
                         'lf-label-editor-dragging': isDragging,
                         'lf-label-editor-editing': isEditing,
                         'lf-label-editor-hover': !isEditing && (isHovered || isSelected)

package/es/tools/label/LabelOverlay.js

@@ -49,7 +49,7 @@ import { Component, observer } from '@logicflow/core';
 import { forEach, merge } from 'lodash-es';
 import Label from './Label';
 import LabelModel from './LabelModel';
-import { MediumEditor, defaultOptions, ColorPickerButton } from './mediumEditor';
+import { MediumEditor, defaultOptions, createColorPickerButtonClass, } from './mediumEditor';
 // const { createUuid } = LogicFlowUtil
 // DONE: 解决问题，如果 LabelOverlay 设置为 Observer，拖拽 Label 时会导致 LabelOverlay 组件重新渲染，不知道为何
 // 目前解决了。流程是 拖动 -> 更新 label 的数据信息到 element model -> 重新渲染 LabelOverlay
@@ -74,7 +74,7 @@ var LabelOverlay = /** @class */ (function (_super) {
         this.editor = new MediumEditor('.lf-label-editor', merge(defaultOptions, {
             autoLink: true,
             extensions: {
-                colorPicker: new ColorPickerButton(),
+                colorPicker: new (createColorPickerButtonClass(MediumEditor))(),
             },
         }));
         // TODO: 2. 在此处监听一些事件，当 node、edge 数据变化时，主动触发重新渲染，保证同步更新
@@ -99,7 +99,7 @@ var LabelOverlay = /** @class */ (function (_super) {
             this.editor = new MediumEditor('.lf-label-editor', merge(defaultOptions, {
                 autoLink: true,
                 extensions: {
-                    colorPicker: new ColorPickerButton(),
+                    colorPicker: new (createColorPickerButtonClass(MediumEditor))(),
                 },
             }));
         }

package/es/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/es/tools/label/mediumEditor.js

@@ -36,56 +36,93 @@ export var defaultOptions = {
     },
     disableEditing: true,
 };
-export var ColorPickerButton = MediumEditor.extensions.button.extend({
-    name: 'colorpicker',
-    tagNames: ['mark'],
-    contentDefault: '<b>Color</b>',
-    aria: 'Color Picker',
-    action: 'colorPicker',
-    init: function () {
-        var _this = this;
-        rangy.init();
-        MediumEditor.extensions.button.prototype.init.call(this);
-        this.colorPicker = new Picker({
-            parent: this.button,
-            color: '#000',
-            onDone: function (res) {
-                if (_this.coloredText && _this.coloredText.isAppliedToSelection()) {
-                    _this.coloredText.undoToSelection();
-                }
-                _this.coloredText = rangy.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');
-    },
-});
+export 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.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 Picker({
+                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.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');
+        },
+    });
+}
 export { MediumEditor };

package/es/tools/snapshot/index.js

@@ -666,7 +666,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) {
@@ -676,18 +676,31 @@ var Snapshot = /** @class */ (function () {
                         return [4 /*yield*/, 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/lib/components/dnd-panel/index.js

@@ -20,6 +20,9 @@ var DndPanel = /** @class */ (function () {
         }
         this.panelEl = document.createElement('div');
         this.panelEl.className = 'lf-dndpanel';
+        this.panelEl.addEventListener('touchmove', function (e) {
+            e.preventDefault();
+        }, { passive: false });
         this.shapeList.forEach(function (shapeItem) {
             var _a;
             (_a = _this.panelEl) === null || _a === void 0 ? void 0 : _a.appendChild(_this.createDndItem(shapeItem));
@@ -66,14 +69,14 @@ var DndPanel = /** @class */ (function () {
         if (shapeItem.disabled) {
             el.classList.add('disabled');
             // 保留callback的执行，可用于界面提示当前shapeItem的禁用状态
-            el.onmousedown = function () {
+            el.onpointerdown = function () {
                 if (shapeItem.callback) {
                     shapeItem.callback(_this.lf, _this.domContainer);
                 }
             };
             return el;
         }
-        el.onmousedown = function () {
+        el.onpointerdown = function (e) {
             if (shapeItem.type) {
                 _this.lf.dnd.startDrag({
                     type: shapeItem.type,
@@ -84,6 +87,7 @@ var DndPanel = /** @class */ (function () {
             if (shapeItem.callback) {
                 shapeItem.callback(_this.lf, _this.domContainer);
             }
+            e.preventDefault();
         };
         el.ondblclick = function (e) {
             _this.lf.graphModel.eventCenter.emit('dnd:panel-dbclick', {

package/lib/components/mini-map/index.js

@@ -182,8 +182,8 @@ var MiniMap = /** @class */ (function () {
             }
         };
         this.startDrag = function (e) {
-            document.addEventListener('mousemove', _this.drag);
-            document.addEventListener('mouseup', _this.drop);
+            document.addEventListener('pointermove', _this.drag);
+            document.addEventListener('pointerup', _this.drop);
             var x = e.x, y = e.y;
             _this.startPosition = { x: x, y: y };
         };
@@ -209,8 +209,8 @@ var MiniMap = /** @class */ (function () {
          * 拖拽预览视窗结束，移除拖拽事件
          */
         this.drop = function () {
-            document.removeEventListener('mousemove', _this.drag);
-            document.removeEventListener('mouseup', _this.drop);
+            document.removeEventListener('pointermove', _this.drag);
+            document.removeEventListener('pointerup', _this.drop);
         };
         /**
          * 点击小地图中非预览视窗的区域时，移动主画布视口聚焦于点击位置
@@ -516,8 +516,8 @@ var MiniMap = /** @class */ (function () {
     MiniMap.prototype.createViewPort = function () {
         var 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', function (e) {
             e.stopPropagation();

package/lib/components/selection-select/index.js

@@ -49,6 +49,12 @@ var SelectionSelect = /** @class */ (function () {
             _this.handleMouseDown(e);
         };
         this.draw = function (ev) {
+            if (_this.lf.graphModel.editConfigModel.isPinching) {
+                _this.lf.updateEditConfig({ stopMoveGraph: _this.originalStopMoveGraph });
+                _this.originStatusSaved = false;
+                _this.cleanupSelectionState();
+                return;
+            }
             var _a = _this.lf.getPointByClient(ev.clientX, ev.clientY).domOverlayPosition, x1 = _a.x, y1 = _a.y;
             _this.endPoint = {
                 x: x1,
@@ -97,9 +103,9 @@ var SelectionSelect = /** @class */ (function () {
             }
             var curStartPoint = (0, lodash_es_1.cloneDeep)(_this.startPoint);
             var curEndPoint = (0, lodash_es_1.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) {
                 var x = curStartPoint.x, y = curStartPoint.y;
@@ -213,8 +219,8 @@ var SelectionSelect = /** @class */ (function () {
         this.endPoint = undefined;
         this.mouseDownInfo = null;
         // 移除事件监听
-        document.removeEventListener('mousemove', this.draw);
-        document.removeEventListener('mouseup', this.drawOff);
+        document.removeEventListener('pointermove', this.draw);
+        document.removeEventListener('pointerup', this.drawOff);
     };
     /**
      * 切换框选模式
@@ -238,7 +244,8 @@ var SelectionSelect = /** @class */ (function () {
         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 事件
@@ -250,7 +257,7 @@ var SelectionSelect = /** @class */ (function () {
     SelectionSelect.prototype.removeEventListeners = function () {
         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);
@@ -262,6 +269,8 @@ var SelectionSelect = /** @class */ (function () {
         var _a;
         if (!this.container || this.disabled)
             return;
+        if (this.lf.graphModel.editConfigModel.isPinching)
+            return;
         // 禁用右键框选
         var isRightClick = e.button === 2;
         if (isRightClick)
@@ -295,8 +304,8 @@ var SelectionSelect = /** @class */ (function () {
         wrapper.style.left = "".concat(this.startPoint.x, "px");
         (_a = this.container) === null || _a === void 0 ? void 0 : _a.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);
     };
     /**
      * 设置选中的灵敏度
@@ -334,7 +343,7 @@ var SelectionSelect = /** @class */ (function () {
         if (this.wrapper && this.startPoint && this.endPoint) {
             // 记录上一次的结束点，用于触发 mouseup 事件
             var lastEndPoint = (0, lodash_es_1.cloneDeep)(this.endPoint);
-            var lastEvent = new MouseEvent('mouseup', {
+            var lastEvent = new PointerEvent('pointerup', {
                 clientX: lastEndPoint.x,
                 clientY: lastEndPoint.y,
             });