@logicflow/core 2.1.4 → 2.2.0-alpha.1

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,15 @@ 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()
     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 +116,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 +170,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 +199,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(
       {
@@ -309,40 +314,31 @@ class Anchor extends Component<IProps, IState> {
         return
       }
       this.preTargetNode = targetNode
-      // 支持节点的每个锚点单独设置是否可连接，因此规则key去nodeId + anchorId作为唯一值
-      const targetInfoId = `${nodeModel.id}_${targetNode.id}_${anchorId}_${anchorData.id}`
-
-      // 查看鼠标是否进入过target，若有检验结果，表示进入过, 就不重复计算了。
-      if (!this.targetRuleResults.has(targetInfoId)) {
-        const targetAnchor = info.anchor
-        const sourceRuleResult = nodeModel.isAllowConnectedAsSource(
+      const anchorDist = distance(endX, endY, info.anchor.x, info.anchor.y)
+      const validateDistance = 10
+      const { editConfigModel } = graphModel
+      if (
+        !editConfigModel.anchorProximityValidate ||
+        anchorDist <= validateDistance
+      ) {
+        this.validateAndSetState(
           targetNode,
-          anchorData,
-          targetAnchor,
-        )
-        const targetRuleResult = targetNode.isAllowConnectedAsTarget(
+          anchorId,
+          info.anchor,
           nodeModel,
           anchorData,
-          targetAnchor,
-        )
-        this.sourceRuleResults.set(
-          targetInfoId,
-          formatAnchorConnectValidateData(sourceRuleResult),
-        )
-        this.targetRuleResults.set(
-          targetInfoId,
-          formatAnchorConnectValidateData(targetRuleResult),
         )
       }
-      const { isAllPass: isSourcePass } =
-        this.sourceRuleResults.get(targetInfoId) ?? {}
-      const { isAllPass: isTargetPass } =
-        this.targetRuleResults.get(targetInfoId) ?? {}
-      // 实时提示出即将链接的锚点
-      if (isSourcePass && isTargetPass) {
-        targetNode.setElementState(ElementState.ALLOW_CONNECT)
-      } 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 &&
@@ -350,6 +346,59 @@ class Anchor extends Component<IProps, IState> {
     ) {
       // 为了保证鼠标离开的时候，将上一个节点状态重置为正常状态。
       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
+    }
+  }
+
+  // 校验 source/target 连接规则并设置目标节点状态
+  validateAndSetState(
+    targetNode: BaseNodeModel,
+    anchorId: string | undefined,
+    targetAnchor: AnchorConfig,
+    nodeModel: BaseNodeModel,
+    anchorData: AnchorConfig,
+  ) {
+    const targetInfoId = `${nodeModel.id}_${targetNode.id}_${anchorId}_${anchorData.id}`
+    if (!this.targetRuleResults.has(targetInfoId)) {
+      // 首次计算并缓存源/目标两侧的规则校验结果
+      const sourceRuleResult = nodeModel.isAllowConnectedAsSource(
+        targetNode,
+        anchorData,
+        targetAnchor,
+      )
+      const targetRuleResult = targetNode.isAllowConnectedAsTarget(
+        nodeModel,
+        anchorData,
+        targetAnchor,
+      )
+      this.sourceRuleResults.set(
+        targetInfoId,
+        formatAnchorConnectValidateData(sourceRuleResult),
+      )
+      this.targetRuleResults.set(
+        targetInfoId,
+        formatAnchorConnectValidateData(targetRuleResult),
+      )
+    }
+    // 读取缓存的校验结果
+    const { isAllPass: isSourcePass } =
+      this.sourceRuleResults.get(targetInfoId) ?? {}
+    const { isAllPass: isTargetPass } =
+      this.targetRuleResults.get(targetInfoId) ?? {}
+    // 两侧都通过则允许连接，否则标记为不允许连接
+    if (isSourcePass && isTargetPass) {
+      targetNode.setElementState(ElementState.ALLOW_CONNECT)
+    } else {
+      targetNode.setElementState(ElementState.NOT_ALLOW_CONNECT)
     }
   }
 
@@ -375,7 +424,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()
@@ -88,9 +89,9 @@ export abstract class BaseNode<P extends IProps = IProps> extends Component<
     }
   }
 
-  componentDidMount() { }
+  componentDidMount() {}
 
-  componentDidUpdate() { }
+  componentDidUpdate() {}
 
   abstract getShape(): h.JSX.Element | null
 
@@ -330,6 +331,10 @@ 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) => {
@@ -431,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 = () => {
@@ -532,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)
           // }