@logicflow/core 2.1.3 → 2.2.0

package/src/tool/MultipleSelectTool.tsx

@@ -26,7 +26,7 @@ export default class MultipleSelect extends Component<IToolProps> {
     })
   }
 
-  handleMouseDown = (ev: MouseEvent) => {
+  handleMouseDown = (ev: PointerEvent) => {
     this.stepDrag.handleMouseDown(ev)
   }
   // 使多选区域的滚轮事件可以触发画布的滚轮事件
@@ -123,7 +123,7 @@ export default class MultipleSelect extends Component<IToolProps> {
       <div
         className="lf-multiple-select"
         style={style}
-        onMouseDown={this.handleMouseDown}
+        onPointerDown={this.handleMouseDown}
         onContextMenu={this.handleContextMenu}
         onWheel={this.handleWheelEvent}
       />

package/src/util/drag.ts

@@ -10,7 +10,7 @@ const LEFT_MOUSE_BUTTON_CODE = 0
 export type IDragParams = {
   deltaX: number
   deltaY: number
-  event?: MouseEvent
+  event?: PointerEvent
   [key: string]: unknown
 }
 
@@ -99,16 +99,16 @@ export class StepDrag {
     this.model = model
   }
 
-  handleMouseDown = (e: MouseEvent) => {
+  handleMouseDown = (e: PointerEvent) => {
     const DOC: any = window?.document
     if (e.button !== LEFT_MOUSE_BUTTON_CODE) return
     if (this.isStopPropagation) e.stopPropagation()
+    e.preventDefault()
     this.isStartDragging = true
     this.startX = e.clientX
     this.startY = e.clientY
-
-    DOC.addEventListener('mousemove', this.handleMouseMove, false)
-    DOC.addEventListener('mouseup', this.handleMouseUp, false)
+    DOC.addEventListener('pointermove', this.handleMouseMove, false)
+    DOC.addEventListener('pointerup', this.handleMouseUp, false)
     const elementData = this.model?.getData()
     this.eventCenter?.emit(EventType[`${this.eventType}_MOUSEDOWN`], {
       e,
@@ -117,8 +117,9 @@ export class StepDrag {
     this.startTime = new Date().getTime()
   }
 
-  handleMouseMove = (e: MouseEvent) => {
+  handleMouseMove = (e: PointerEvent) => {
     if (this.isStopPropagation) e.stopPropagation()
+    e.preventDefault()
     if (!this.isStartDragging) return
     this.sumDeltaX += e.clientX - this.startX
     this.sumDeltaY += e.clientY - this.startY
@@ -170,15 +171,19 @@ export class StepDrag {
     }
   }
 
-  handleMouseUp = (e: MouseEvent) => {
+  handleMouseUp = (e: PointerEvent) => {
     const DOC = window.document
 
     this.isStartDragging = false
     if (this.isStopPropagation) e.stopPropagation()
+    const target = e.target as any
+    if (target && typeof target.releasePointerCapture === 'function') {
+      target.releasePointerCapture(e.pointerId)
+    }
     // fix #568: 如果onDragging在下一个事件循环中触发，而drop在当前事件循环，会出现问题。
     Promise.resolve().then(() => {
-      DOC.removeEventListener('mousemove', this.handleMouseMove, false)
-      DOC.removeEventListener('mouseup', this.handleMouseUp, false)
+      DOC.removeEventListener('pointermove', this.handleMouseMove, false)
+      DOC.removeEventListener('pointerup', this.handleMouseUp, false)
       const elementData = this.model?.getData()
       this.eventCenter?.emit(EventType[`${this.eventType}_MOUSEUP`], {
         e,
@@ -195,9 +200,8 @@ export class StepDrag {
   }
   cancelDrag = () => {
     const DOC: any = window?.document
-
-    DOC.removeEventListener('mousemove', this.handleMouseMove, false)
-    DOC.removeEventListener('mouseup', this.handleMouseUp, false)
+    DOC.removeEventListener('pointermove', this.handleMouseMove, false)
+    DOC.removeEventListener('pointerup', this.handleMouseUp, false)
     this.onDragEnd({ event: undefined })
     this.isDragging = false
   }

package/src/view/Anchor.tsx

@@ -29,7 +29,7 @@ interface IProps {
   anchorIndex: number
   graphModel: GraphModel
   nodeModel: BaseNodeModel
-  setHoverOff: (e: MouseEvent) => void
+  setHoverOff: (e: PointerEvent) => void
 }
 
 interface IState {
@@ -154,7 +154,7 @@ class Anchor extends Component<IProps, IState> {
       endY: y1,
       dragging: true,
     })
-    this.moveAnchorEnd(x1, y1)
+    this.moveAnchorEnd(x1, y1, event)
     if (nearBoundary.length > 0 && !stopMoveGraph && autoExpand) {
       this.t = createRaf(() => {
         const [translateX, translateY] = nearBoundary
@@ -164,7 +164,7 @@ class Anchor extends Component<IProps, IState> {
           endX: endX - translateX,
           endY: endY - translateY,
         })
-        this.moveAnchorEnd(endX - translateX, endY - translateY)
+        this.moveAnchorEnd(endX - translateX, endY - translateY, event)
       })
     }
     eventCenter.emit(EventType.ANCHOR_DRAG, {
@@ -189,6 +189,11 @@ class Anchor extends Component<IProps, IState> {
     this.sourceRuleResults.clear()
     this.targetRuleResults.clear()
     const { graphModel, nodeModel, anchorData } = this.props
+    // 拖拽结束清理：取消悬浮态
+    if (this.preTargetNode) {
+      this.preTargetNode.setHovered(false)
+      this.preTargetNode = undefined
+    }
 
     graphModel.eventCenter.emit(EventType.ANCHOR_DRAGEND, {
       data: anchorData,
@@ -216,7 +221,7 @@ class Anchor extends Component<IProps, IState> {
     }
   }
 
-  checkEnd = (event: MouseEvent | null | undefined) => {
+  checkEnd = (event: PointerEvent | null | undefined) => {
     const {
       graphModel,
       nodeModel,
@@ -289,7 +294,7 @@ class Anchor extends Component<IProps, IState> {
     }
   }
 
-  moveAnchorEnd(endX: number, endY: number) {
+  moveAnchorEnd(endX: number, endY: number, event?: PointerEvent) {
     const { graphModel, nodeModel, anchorData } = this.props
     const info = targetNodeInfo(
       {
@@ -344,12 +349,33 @@ class Anchor extends Component<IProps, IState> {
       } else {
         targetNode.setElementState(ElementState.NOT_ALLOW_CONNECT)
       }
+      // 人工触发进入目标节点事件，同步设置 hovered 以驱动锚点显隐和样式
+      if (!targetNode.isHovered) {
+        const nodeData = targetNode.getData()
+        if (event) {
+          graphModel.eventCenter.emit(EventType.NODE_MOUSEENTER, {
+            data: nodeData,
+            e: event,
+          })
+        }
+        targetNode.setHovered(true)
+      }
     } else if (
       this.preTargetNode &&
       this.preTargetNode.state !== ElementState.DEFAULT
     ) {
       // 为了保证鼠标离开的时候，将上一个节点状态重置为正常状态。
       this.preTargetNode.setElementState(ElementState.DEFAULT)
+      // 未命中任何节点：人工派发离开事件并取消悬浮，避免状态残留
+      const prevData = this.preTargetNode.getData()
+      if (event) {
+        graphModel.eventCenter.emit(EventType.NODE_MOUSELEAVE, {
+          data: prevData,
+          e: event,
+        })
+      }
+      this.preTargetNode.setHovered(false)
+      this.preTargetNode = undefined
     }
   }
 
@@ -375,7 +401,7 @@ class Anchor extends Component<IProps, IState> {
               nodeModel,
             })
           }}
-          onMouseDown={(ev) => {
+          onPointerDown={(ev) => {
             graphModel.eventCenter.emit(EventType.ANCHOR_MOUSEDOWN, {
               data: anchorData,
               e: ev!,

package/src/view/Control.tsx

@@ -393,7 +393,7 @@ export class ResizeControl extends Component<
           height={25}
           fill="transparent"
           stroke="transparent"
-          onMouseDown={this.dragHandler.handleMouseDown}
+          onPointerDown={this.dragHandler.handleMouseDown}
         />
       </g>
     )

package/src/view/Rotate.tsx

@@ -99,7 +99,7 @@ class RotateControlPoint extends Component<IRotateControlProps> {
     return (
       <g className="lf-rotate-control">
         <g
-          onMouseDown={(ev) => {
+          onPointerDown={(ev) => {
             this.stepperDrag.handleMouseDown(ev)
           }}
         >

package/src/view/behavior/dnd.ts

@@ -11,6 +11,8 @@ export class Dnd {
   nodeConfig: OnDragNodeConfig | null = null
   lf: LogicFlow
   fakeNode: BaseNodeModel | null = null
+  docPointerMove?: (e: PointerEvent) => void
+  docPointerUp?: (e: PointerEvent) => void
 
   constructor(params: { lf: LogicFlow }) {
     const { lf } = params
@@ -36,19 +38,67 @@ export class Dnd {
     }
   }
 
+  isInsideCanvas(e: PointerEvent): boolean {
+    const overlay = this.lf.graphModel.rootEl.querySelector(
+      '[name="canvas-overlay"]',
+    ) as HTMLElement | null
+    const topEl = window.document.elementFromPoint(
+      e.clientX,
+      e.clientY,
+    ) as HTMLElement | null
+    return (
+      topEl === overlay ||
+      (topEl !== null && !!overlay && overlay.contains(topEl))
+    )
+  }
   startDrag(nodeConfig: OnDragNodeConfig) {
     const { editConfigModel } = this.lf.graphModel
-    if (!editConfigModel?.isSilentMode) {
-      this.nodeConfig = nodeConfig
-      window.document.addEventListener('mouseup', this.stopDrag)
+    if (editConfigModel?.isSilentMode) return
+    this.nodeConfig = nodeConfig
+    // 指针移动：根据命中结果判断是否在画布覆盖层上，驱动假节点创建/移动或清理
+    this.docPointerMove = (e: PointerEvent) => {
+      if (!this.nodeConfig) return
+      // 离开画布：清理吸附线与假节点
+      if (!this.isInsideCanvas(e)) {
+        this.onDragLeave()
+        return
+      }
+      // 首次进入画布：创建假节点并初始化位置
+      if (!this.fakeNode) {
+        this.dragEnter(e)
+        return
+      }
+      // 在画布内移动：更新假节点位置与吸附线
+      this.onDragOver(e)
+    }
+    // 指针抬起：在画布内落点生成节点，否则清理假节点
+    this.docPointerUp = (e: PointerEvent) => {
+      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)
   }
 
   stopDrag = () => {
     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)
+    }
   }
-  dragEnter = (e: MouseEvent) => {
+  dragEnter = (e: PointerEvent) => {
     if (!this.nodeConfig || this.fakeNode) return
     this.fakeNode = this.lf.createFakeNode({
       ...this.nodeConfig,
@@ -107,17 +157,6 @@ export class Dnd {
     this.lf.graphModel.removeFakeNode()
     this.fakeNode = null
   }
-
-  eventMap() {
-    return {
-      onMouseEnter: this.dragEnter,
-      onMouseOver: this.dragEnter, // IE11
-      onMouseMove: this.onDragOver,
-      onMouseLeave: this.onDragLeave,
-      // onMouseOut: this.onDragLeave, // IE11
-      onMouseUp: this.onDrop,
-    }
-  }
 }
 
 export default Dnd

package/src/view/edge/AdjustPoint.tsx

@@ -78,7 +78,7 @@ export class AdjustPoint extends Component<IProps, IState> {
     })
   }
 
-  handleMouseDown = (ev: MouseEvent) => {
+  handleMouseDown = (ev: PointerEvent) => {
     if (this.stepDrag) {
       this.stepDrag.handleMouseDown(ev)
     }
@@ -414,7 +414,7 @@ export class AdjustPoint extends Component<IProps, IState> {
     return (
       <g
         pointerEvents={dragging ? 'none' : ''}
-        onMouseDown={this.handleMouseDown}
+        onPointerDown={this.handleMouseDown}
       >
         {!dragging ? getAdjustPointShape(x, y, edgeModel) : ''}
       </g>

package/src/view/edge/BaseEdge.tsx

@@ -34,6 +34,7 @@ export abstract class BaseEdge<P extends IProps> extends Component<
   startTime?: number
   contextMenuTime?: number
   clickTimer?: number
+  longPressTimer?: number
   textRef = createRef()
 
   constructor() {
@@ -479,13 +480,27 @@ export abstract class BaseEdge<P extends IProps> extends Component<
   /**
    * 不支持重写
    */
-  handleMouseDown = (e: MouseEvent) => {
+  handleMouseDown = (e: PointerEvent) => {
     e.stopPropagation()
     this.startTime = new Date().getTime()
+    if (this.longPressTimer) {
+      clearTimeout(this.longPressTimer)
+    }
+    if (e.pointerType === 'touch') {
+      this.longPressTimer = window.setTimeout(() => {
+        if (!this.props.model.isDragging) {
+          this.handleContextMenu(e)
+        }
+      }, 500)
+    }
   }
   handleMouseUp = () => {
     const { model } = this.props
     this.mouseUpDrag = model.isDragging
+    if (this.longPressTimer) {
+      clearTimeout(this.longPressTimer)
+      this.longPressTimer = undefined
+    }
   }
   /**
    * 不支持重写
@@ -606,10 +621,15 @@ export abstract class BaseEdge<P extends IProps> extends Component<
           ]
             .filter(Boolean)
             .join(' ')}
-          onMouseDown={this.handleMouseDown}
-          onMouseUp={this.handleMouseUp}
+          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}

package/src/view/edge/PolylineEdge.tsx

@@ -95,7 +95,7 @@ export class PolylineEdge extends BaseEdge<IPolylineEdgeProps> {
   /**
    * 不支持重写
    */
-  beforeDragStart = (e, appendInfo) => {
+  beforeDragStart = (e: PointerEvent, appendInfo) => {
     // 如果允许拖拽调整触发事件处理
     if (appendInfo.draggable) {
       this.drag.handleMouseDown(e)
@@ -284,7 +284,7 @@ export class PolylineEdge extends BaseEdge<IPolylineEdgeProps> {
         append = (
           <g
             className={this.isDragging ? 'lf-dragging' : 'lf-drag-able'}
-            onMouseDown={(e) => this.beforeDragStart(e, appendInfo)}
+            onPointerDown={(e) => this.beforeDragStart(e, appendInfo)}
           >
             <g className={className}>{this.getAppendShape(appendInfo)}</g>
           </g>

package/src/view/node/BaseNode.tsx

@@ -42,6 +42,7 @@ export abstract class BaseNode<P extends IProps = IProps> extends Component<
   mouseUpDrag?: boolean
   startTime?: number
   modelDisposer: IReactionDisposer
+  longPressTimer?: number
 
   constructor(props: IProps) {
     super()
@@ -330,15 +331,27 @@ export abstract class BaseNode<P extends IProps = IProps> extends Component<
   handleMouseUp = () => {
     const { model } = this.props
     this.mouseUpDrag = model.isDragging
+    if (this.longPressTimer) {
+      clearTimeout(this.longPressTimer)
+      this.longPressTimer = undefined
+    }
   }
 
   handleClick = (e: MouseEvent) => {
     // 节点拖拽进画布之后，不触发click事件相关emit
     // 点拖拽进画布没有触发mousedown事件，没有startTime，用这个值做区分
     const isDragging = this.mouseUpDrag === false
+    const curTime = new Date().getTime()
     if (!this.startTime) return
+    const timeInterval = curTime - this.startTime
     const { model, graphModel } = this.props
-    if (!isDragging) return // 如果是拖拽, 不触发click事件。
+    // 这里会有一种极端情况：当网格大小是1或者关闭网格吸附时，用触摸板点击节点会触发拖拽事件导致节点无法选中
+    // 当触摸板点击节点时,为了防止误触发拖拽导致节点无法选中，允许在非拖拽状态且时间间隔小于100ms时触发点击事件
+    if (!isDragging && timeInterval > 100) return
+    if (!isDragging) {
+      this.onDragEnd()
+      this.handleMouseUp()
+    }
     // 节点数据，多为事件对象数据抛出
     const nodeData = model.getData()
     const position = graphModel.getPointByClient({
@@ -423,13 +436,23 @@ export abstract class BaseNode<P extends IProps = IProps> extends Component<
     }
   }
 
-  handleMouseDown = (ev: MouseEvent) => {
+  handleMouseDown = (ev: PointerEvent) => {
     const { model, graphModel } = this.props
     this.startTime = new Date().getTime()
     const { editConfigModel } = graphModel
     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(() => {
+        if (!this.props.model.isDragging) {
+          this.handleContextMenu(ev)
+        }
+      }, 500)
+    }
   }
 
   handleFocus = () => {
@@ -440,6 +463,8 @@ export abstract class BaseNode<P extends IProps = IProps> extends Component<
   }
 
   handleBlur = () => {
+    // 当节点通过自定义锚点实现节点删除时，这里props会变成undefined，需兼容一下
+    if (!this.props) return
     const { model, graphModel } = this.props
     graphModel.eventCenter.emit(EventType.NODE_BLUR, {
       data: model.getData(),
@@ -522,9 +547,10 @@ export abstract class BaseNode<P extends IProps = IProps> extends Component<
       nodeShape = (
         <g
           className={`${this.getStateClassName()} ${className}`}
-          onMouseDown={this.handleMouseDown}
-          onMouseUp={this.handleMouseUp}
+          onPointerDown={this.handleMouseDown}
+          onPointerUp={this.handleMouseUp}
           onClick={this.handleClick}
+          //因为移动端点击操作完成会按顺序触发enter、leave、click事件，所以会造成节点的闪烁，所以在这里没有统一状态为Pointer
           onMouseEnter={this.setHoverOn}
           onMouseOver={this.setHoverOn}
           onMouseLeave={this.setHoverOff}

package/src/view/overlay/BezierAdjustOverlay.tsx

@@ -71,7 +71,7 @@ export class BezierAdjustAnchor extends Component<IAnchorProps, IState> {
         x={x}
         y={y}
         {...adjustAnchor}
-        onMouseDown={(ev) => {
+        onPointerDown={(ev) => {
           // if (edgeAddable !== false) {
           this.dragHandler.handleMouseDown(ev)
           // }

package/src/view/overlay/CanvasOverlay.tsx

@@ -18,6 +18,12 @@ export class CanvasOverlay extends Component<IProps, IState> {
   stepDrag: StepDrag
   stepScrollX = 0
   stepScrollY = 0
+  pointers = new Map<number, { x: number; y: number }>()
+  pinchStartDistance?: number
+  pinchStartScale?: number
+  pinchLastCenterX?: number
+  pinchLastCenterY?: number
+  longPressTimer?: number
 
   constructor(props: IProps) {
     super()
@@ -43,6 +49,10 @@ export class CanvasOverlay extends Component<IProps, IState> {
   //   return this.props as InjectedProps;
   // }
   onDragging = ({ deltaX, deltaY }: IDragParams) => {
+    if (this.longPressTimer) {
+      clearTimeout(this.longPressTimer)
+      this.longPressTimer = undefined
+    }
     this.setState({
       isDragging: true,
     })
@@ -125,7 +135,7 @@ export class CanvasOverlay extends Component<IProps, IState> {
     }
   }
   // 鼠标、触摸板 按下
-  mouseDownHandler = (ev: MouseEvent) => {
+  pointerDownHandler = (ev: PointerEvent) => {
     const {
       graphModel: {
         eventCenter,
@@ -134,6 +144,36 @@ export class CanvasOverlay extends Component<IProps, IState> {
         gridSize,
       },
     } = this.props
+    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(() => {
+        this.handleContextMenu(ev)
+      }, 500)
+    }
+    // 检测双指触摸，初始化捏合缩放
+    if (this.pointers.size === 2) {
+      const {
+        graphModel: { transformModel, editConfigModel },
+      } = this.props
+      // 记录两指当前位置用于计算初始距离
+      const pts = Array.from(this.pointers.values())
+      const dx = pts[0].x - pts[1].x
+      const dy = pts[0].y - pts[1].y
+      const cx = (pts[0].x + pts[1].x) / 2
+      const 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.updateEditConfig({ isPinching: true })
+      return
+    }
     const { adjustEdge, adjustNodePosition, stopMoveGraph } = editConfigModel
     const target = ev.target as HTMLElement
     const isFrozenElement = !adjustEdge && !adjustNodePosition
@@ -148,13 +188,76 @@ export class CanvasOverlay extends Component<IProps, IState> {
       this.clickHandler(ev)
     }
   }
+  pointerMoveHandler = (ev: PointerEvent) => {
+    // 记录当前指针位置（按 pointerId）
+    this.pointers.set(ev.pointerId, { x: ev.clientX, y: ev.clientY })
+    // 当已记录初始捏合距离且存在两指时，执行捏合缩放
+    if (this.pinchStartDistance && this.pointers.size >= 2) {
+      const {
+        graphModel,
+        graphModel: { editConfigModel, transformModel },
+      } = this.props
+      if (editConfigModel.stopZoomGraph) return
+      // 取消触摸长按计时，避免捏合过程中误触发上下文菜单
+      if (this.longPressTimer) {
+        clearTimeout(this.longPressTimer)
+      }
+      // 计算两指间当前距离
+      const pts = Array.from(this.pointers.values())
+      const dx = pts[0].x - pts[1].x
+      const dy = pts[0].y - pts[1].y
+      const dist = Math.hypot(dx, dy)
+      // 以初始缩放为基准，根据距离比例得到新的缩放比例
+      const scale =
+        (this.pinchStartScale ?? transformModel.SCALE_X) *
+        (dist / this.pinchStartDistance)
+      // 取两指中心作为缩放原点，并转换为画布坐标系
+      const cx = (pts[0].x + pts[1].x) / 2
+      const cy = (pts[0].y + pts[1].y) / 2
+      const pos = graphModel.getPointByClient({ x: cx, y: cy })
+      const { x, y } = pos.canvasOverlayPosition
+      transformModel.zoom(scale, [x, y])
+      // 双指中心位移驱动画布平移，配合缩放实现捏合移动；
+      if (!editConfigModel.stopMoveGraph || editConfigModel.isPinching) {
+        const deltaX =
+          this.pinchLastCenterX === undefined ? 0 : cx - this.pinchLastCenterX
+        const deltaY =
+          this.pinchLastCenterY === undefined ? 0 : cy - this.pinchLastCenterY
+        transformModel.translate(deltaX, deltaY)
+        this.pinchLastCenterX = cx
+        this.pinchLastCenterY = cy
+      }
+      ev.preventDefault()
+    }
+  }
+  pointerUpHandler = (ev: PointerEvent) => {
+    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
+      const {
+        graphModel: { editConfigModel },
+      } = this.props
+      // 标记退出捏合，框选等交互可恢复
+      editConfigModel.updateEditConfig({ isPinching: false })
+    }
+  }
 
   render() {
     const {
       graphModel: { transformModel },
     } = this.props
     const { transform } = transformModel.getTransformStyle()
-    const { children, dnd } = this.props
+    const { children } = this.props
     const { isDragging } = this.state
 
     return (
@@ -164,14 +267,17 @@ export class CanvasOverlay extends Component<IProps, IState> {
         height="100%"
         name="canvas-overlay"
         onWheel={this.zoomHandler}
-        onMouseDown={this.mouseDownHandler}
+        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()}
       >
         <g transform={transform}>{children}</g>
       </svg>

package/src/view/text/BaseText.tsx

@@ -73,7 +73,7 @@ export class BaseText<
     )
   }
 
-  mouseDownHandler = (e: MouseEvent) => {
+  mouseDownHandler = (e: PointerEvent) => {
     const { draggable, model, graphModel } = this.props
     const {
       editConfigModel: { nodeTextDraggable },
@@ -120,7 +120,10 @@ export class BaseText<
     } = this.props
     if (text) {
       return (
-        <g onMouseDown={this.mouseDownHandler} onDblClick={this.dbClickHandler}>
+        <g
+          onPointerDown={this.mouseDownHandler}
+          onDblClick={this.dbClickHandler}
+        >
           {this.getShape()}
         </g>
       )