@logicflow/extension 2.1.6 → 2.2.0

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/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/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,
             });

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logicflow/extension",
-  "version": "2.1.6",
+  "version": "2.2.0",
   "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",
+    "@logicflow/core": "2.2.0"
   },
   "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",
+    "@logicflow/vue-node-registry": "1.2.0"
   },
   "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/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}