@logicflow/core 2.1.4 → 2.2.0

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

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>
       )