@logicflow/core 2.1.4 → 2.2.0-alpha.1

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