fix: 修复移动端框选、缩放之间的冲突以及锚点连接时的问题，支持双指滚动

Author: z-pangolin

packages/core/src/model/EditConfigModel.ts

@@ -125,6 +125,7 @@ export interface IEditConfigType {
   edgeTextMode: TextMode
   // 开启网格对齐
   snapGrid: boolean
+  isPinching: boolean
 }
 
 export type IConfigKeys = keyof IEditConfigType
@@ -186,6 +187,7 @@ const allKeys = [
   'edgeTextMultiple', // 是否支持多个边文本
   'nodeTextVertical', // 节点文本是否纵向显示
   'edgeTextVertical', // 边文本是否纵向显示
+  'isPinching', //是否是双指捏合态
 ] as const
 
 /**
@@ -202,6 +204,7 @@ export class EditConfigModel {
   @observable stopMoveGraph = false
   @observable stopScrollGraph = false
   @observable snapGrid = false
+  @observable isPinching = false
   /*********************************************************
    * 文本相关配置（全局）
    ********************************************************/

packages/core/src/model/GraphModel.ts

@@ -1248,6 +1248,7 @@ export class GraphModel {
   clearSelectElements() {
     this.selectElements.forEach((element) => {
       element?.setSelected(false)
+      element?.setHovered(false)
     })
     this.selectElements.clear()
     /**

packages/core/src/util/drag.ts

@@ -104,12 +104,6 @@ export class StepDrag {
     if (e.button !== LEFT_MOUSE_BUTTON_CODE) return
     if (this.isStopPropagation) e.stopPropagation()
     e.preventDefault()
-    const target = e.target as any
-    // 使用 Pointer Capture 保证后续 pointermove/pointerup 事件派发到当前目标
-    // 在移动端或复杂 DOM 场景下，可避免因隐式捕获导致的事件丢失
-    if (target && typeof target.setPointerCapture === 'function') {
-      target.setPointerCapture(e.pointerId)
-    }
     this.isStartDragging = true
     this.startX = e.clientX
     this.startY = e.clientY

packages/core/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,
@@ -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
     }
   }
 

packages/core/src/view/behavior/dnd.ts

@@ -38,72 +38,64 @@ 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
-      // 指针移动：根据命中结果判断是否在画布覆盖层上，驱动假节点创建/移动或清理
-      this.docPointerMove = (e: PointerEvent) => {
-        if (!this.nodeConfig) return
-        // 获取画布覆盖层元素（仅在其自身或后代命中时视为“在画布内”）
-        const overlay = this.lf.graphModel.rootEl.querySelector(
-          '[name="canvas-overlay"]',
-        ) as HTMLElement | null
-        // 获取当前指针位置下最上层的DOM元素，判断当前指针是否“在画布上”
-        const topEl = window.document.elementFromPoint(
-          e.clientX,
-          e.clientY,
-        ) as HTMLElement | null
-        const inside = topEl === overlay || (topEl && overlay?.contains(topEl))
-        // 离开画布：清理吸附线与假节点
-        if (!inside) {
-          this.onDragLeave()
-          return
-        }
-        // 首次进入画布：创建假节点并初始化位置
-        if (!this.fakeNode) {
-          this.dragEnter(e)
-          return
-        }
-        // 在画布内移动：更新假节点位置与吸附线
-        this.onDragOver(e)
+    if (editConfigModel?.isSilentMode) return
+    this.nodeConfig = nodeConfig
+    // 指针移动：根据命中结果判断是否在画布覆盖层上，驱动假节点创建/移动或清理
+    this.docPointerMove = (e: PointerEvent) => {
+      if (!this.nodeConfig) return
+      // 离开画布：清理吸附线与假节点
+      if (!this.isInsideCanvas(e)) {
+        this.onDragLeave()
+        return
       }
-      // 指针抬起：在画布内落点生成节点，否则清理假节点
-      this.docPointerUp = (e: PointerEvent) => {
-        if (!this.nodeConfig) return
-        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
-        const inside = topEl === overlay || (topEl && overlay?.contains(topEl))
-        if (inside) {
-          this.onDrop(e)
-        } else {
-          this.onDragLeave()
-        }
-        // 阻止默认行为与冒泡，避免滚动/点击穿透
-        e.preventDefault()
-        e.stopPropagation()
-        // 结束拖拽并移除监听
-        this.stopDrag()
+      // 首次进入画布：创建假节点并初始化位置
+      if (!this.fakeNode) {
+        this.dragEnter(e)
+        return
       }
-      window.document.addEventListener('pointermove', this.docPointerMove)
-      window.document.addEventListener('pointerup', this.docPointerUp)
+      // 在画布内移动：更新假节点位置与吸附线
+      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
     if (this.docPointerMove) {
       window.document.removeEventListener('pointermove', this.docPointerMove)
-      this.docPointerMove = undefined
     }
     if (this.docPointerUp) {
       window.document.removeEventListener('pointerup', this.docPointerUp)
-      this.docPointerUp = undefined
     }
   }
   dragEnter = (e: PointerEvent) => {
@@ -165,17 +157,6 @@ export class Dnd {
     this.lf.graphModel.removeFakeNode()
     this.fakeNode = null
   }
-
-  // eventMap() {
-  //   return {
-  //     // onPointerEnter: this.dragEnter,
-  //     // onPointerOver: this.dragEnter, // IE11
-  //     // onMouseMove: this.onDragOver,
-  //     // onPointerLeave: this.onDragLeave,
-  //     // onMouseOut: this.onDragLeave, // IE11
-  //     // onMouseUp: this.onDrop,
-  //   }
-  // }
 }
 
 export default Dnd

packages/core/src/view/edge/BaseEdge.tsx

@@ -444,7 +444,7 @@ export abstract class BaseEdge<P extends IProps> extends Component<
   /**
    * 不支持重写，如果想要基于contextmenu事件做处理，请监听edge:contextmenu事件。
    */
-  handleContextMenu = (ev: MouseEvent | PointerEvent) => {
+  handleContextMenu = (ev: MouseEvent) => {
     ev.preventDefault()
     // 节点右击也会触发时间，区分右击和点击(mouseup)
     this.contextMenuTime = new Date().getTime()

packages/core/src/view/node/BaseNode.tsx

@@ -249,7 +249,7 @@ export abstract class BaseNode<P extends IProps = IProps> extends Component<
       gridSize,
     } = graphModel
     model.isDragging = true
-    const { clientX, clientY } = event as PointerEvent
+    const { clientX, clientY } = event!
     let {
       canvasOverlayPosition: { x, y },
     } = graphModel.getPointByClient({
@@ -337,7 +337,7 @@ export abstract class BaseNode<P extends IProps = IProps> extends Component<
     }
   }
 
-  handleClick = (e: MouseEvent | PointerEvent) => {
+  handleClick = (e: MouseEvent) => {
     // 节点拖拽进画布之后，不触发click事件相关emit
     // 点拖拽进画布没有触发mousedown事件，没有startTime，用这个值做区分
     const isDragging = this.mouseUpDrag === false
@@ -406,7 +406,7 @@ export abstract class BaseNode<P extends IProps = IProps> extends Component<
     }
   }
 
-  handleContextMenu = (ev: MouseEvent | PointerEvent) => {
+  handleContextMenu = (ev: MouseEvent) => {
     ev.preventDefault()
     const { model, graphModel } = this.props
     const { editConfigModel } = graphModel
@@ -550,6 +550,7 @@ export abstract class BaseNode<P extends IProps = IProps> extends Component<
           onPointerDown={this.handleMouseDown}
           onPointerUp={this.handleMouseUp}
           onClick={this.handleClick}
+          //因为移动端点击操作完成会按顺序触发enter、leave、click事件，所以会造成节点的闪烁，所以在这里没有统一状态为Pointer
           onMouseEnter={this.setHoverOn}
           onMouseOver={this.setHoverOn}
           onMouseLeave={this.setHoverOff}