Merge pull request #954 from x1mrdonut1x/feature/pointer-events

Author: Ilaiwi

src/lib/scroll/ScrollElement.tsx

@@ -1,4 +1,4 @@
-import {Component, createRef, CSSProperties, MouseEventHandler, ReactNode} from 'react'
+import { Component, createRef, CSSProperties, ReactNode } from 'react'
 import { getParentPosition } from '../utility/dom-helpers'
 
 type Props = {
@@ -17,7 +17,7 @@ type State = {
 }
 
 class ScrollElement extends Component<Props, State> {
-  scrollComponentRef = createRef<HTMLDivElement>();
+  scrollComponentRef = createRef<HTMLDivElement>()
   private dragLastPosition: number | null = null
   private lastTouchDistance: number | null = null
   private singleTouchStart: { x: number; y: number; screenY: number } | null = null
@@ -30,14 +30,40 @@ class ScrollElement extends Component<Props, State> {
     }
   }
   componentDidMount() {
-      if (this.scrollComponentRef.current) {
-        this.props.scrollRef(this.scrollComponentRef.current)
-          this.scrollComponentRef.current.addEventListener('wheel', this.handleWheel, { passive: false })
-        this.scrollComponentRef.current.addEventListener('itemInteraction', this.handleItemInteract)
-        this.scrollComponentRef.current.addEventListener('touchstart',this.handleTouchStart,{ passive: false })
-        this.scrollComponentRef.current.addEventListener("touchmove",this.handleTouchMove,{ passive: false })
-        }
+    if (this.scrollComponentRef.current) {
+      this.props.scrollRef(this.scrollComponentRef.current)
+      this.scrollComponentRef.current.addEventListener('wheel', this.handleWheel, { passive: false })
+      this.scrollComponentRef.current.addEventListener('itemInteraction', this.handleItemInteract)
+      this.scrollComponentRef.current.addEventListener('pointerdown', this.handlePointerStart, { passive: false })
+      this.scrollComponentRef.current.addEventListener('pointermove', this.handlePointerMove, { passive: false })
+      this.scrollComponentRef.current.addEventListener('pointerup', this.handlePointerEnd)
+      this.scrollComponentRef.current.addEventListener('pointerleave', this.handlePointerLeave)
+    }
+  }
+
+  handlePointerStart = (e: PointerEvent) => {
+    if (e.pointerType === 'touch') {
+      this.handleTouchStart(e)
+    } else if (e.pointerType === 'mouse') {
+      this.handleMouseDown(e)
+    }
+  }
+
+  handlePointerMove = (e: PointerEvent) => {
+    if (e.pointerType === 'touch') {
+      this.handleTouchMove(e)
+    } else if (e.pointerType === 'mouse') {
+      this.handleMouseMove(e)
     }
+  }
+
+  handlePointerEnd = (e: PointerEvent) => {
+    if (e.pointerType === 'touch') {
+      this.handleTouchEnd()
+    } else if (e.pointerType === 'mouse') {
+      this.handleMouseUp()
+    }
+  }
 
   /**
    * needed to handle scrolling with trackpad
@@ -47,8 +73,6 @@ class ScrollElement extends Component<Props, State> {
     this.props.onScroll(scrollX)
   }
 
-
-
   handleWheel = (e: WheelEvent) => {
     //const { traditionalZoom } = this.props
 
@@ -70,7 +94,7 @@ class ScrollElement extends Component<Props, State> {
     }
   }
 
-  handleMouseDown: MouseEventHandler<HTMLDivElement> = (e) => {
+  handleMouseDown = (e: PointerEvent) => {
     if (e.button === 0) {
       this.dragLastPosition = e.pageX
       this.setState({
@@ -79,8 +103,7 @@ class ScrollElement extends Component<Props, State> {
     }
   }
 
-  handleMouseMove: MouseEventHandler<HTMLDivElement> = (e) => {
-    // this.props.onMouseMove(e)
+  handleMouseMove = (e: PointerEvent) => {
     //why is interacting with item important?
     if (this.state.isDragging && !this.isItemInteraction) {
       this.props.onScroll(this.scrollComponentRef.current!.scrollLeft + this.dragLastPosition! - e.pageX)
@@ -96,52 +119,48 @@ class ScrollElement extends Component<Props, State> {
     })
   }
 
-  handleMouseLeave = () => {
-    // this.props.onMouseLeave(e)
-    this.dragLastPosition = null
-    this.setState({
-      isDragging: false,
-    })
+  handlePointerLeave = (e: PointerEvent) => {
+    if (e.pointerType === 'mouse') {
+      this.dragLastPosition = null
+      this.setState({
+        isDragging: false,
+      })
+    }
   }
 
-  handleTouchStart = (e:TouchEvent) => {
-    if (e.touches.length === 2) {
+  handleTouchStart = (e: PointerEvent) => {
+    if (e.isPrimary) {
       e.preventDefault()
-
-      this.lastTouchDistance = Math.abs(e.touches[0].screenX - e.touches[1].screenX)
+      this.lastTouchDistance = null
+      this.singleTouchStart = { x: e.clientX, y: e.clientY, screenY: window.scrollY }
+      this.lastSingleTouch = { x: e.clientX, y: e.clientY, screenY: window.scrollY }
+    } else {
+      e.preventDefault()
+      this.lastTouchDistance = Math.abs(e.clientX - this.singleTouchStart!.x)
       this.singleTouchStart = null
       this.lastSingleTouch = null
-    } else if (e.touches.length === 1) {
-      e.preventDefault()
-
-      const x = e.touches[0].clientX
-      const y = e.touches[0].clientY
-
-      this.lastTouchDistance = null
-      this.singleTouchStart = { x: x, y: y, screenY: window.pageYOffset }
-      this.lastSingleTouch = { x: x, y: y, screenY: window.pageYOffset }
     }
   }
 
-  handleTouchMove = (e:TouchEvent) => {
+  handleTouchMove = (e: PointerEvent) => {
     const { width, onZoom } = this.props
     if (this.isItemInteraction) {
       e.preventDefault()
       return
     }
-    if (this.lastTouchDistance && e.touches.length === 2) {
+    if (this.lastTouchDistance && !e.isPrimary) {
       e.preventDefault()
-      const touchDistance = Math.abs(e.touches[0].screenX - e.touches[1].screenX)
+      const touchDistance = Math.abs(e.clientX - this.singleTouchStart!.x)
       const parentPosition = getParentPosition(e.currentTarget as HTMLElement)
-      const xPosition = (e.touches[0].screenX + e.touches[1].screenX) / 2 - parentPosition.x
+      const xPosition = (e.clientX + this.singleTouchStart!.x) / 2 - parentPosition.x
       if (touchDistance !== 0 && this.lastTouchDistance !== 0) {
         onZoom(this.lastTouchDistance / touchDistance, xPosition / width)
         this.lastTouchDistance = touchDistance
       }
-    } else if (this.lastSingleTouch && e.touches.length === 1) {
+    } else if (this.lastSingleTouch && e.isPrimary) {
       e.preventDefault()
-      const x = e.touches[0].clientX
-      const y = e.touches[0].clientY
+      const x = e.clientX
+      const y = e.clientY
       const deltaX = x - this.lastSingleTouch.x
       const deltaX0 = x - this.singleTouchStart!.x
       const deltaY0 = y - this.singleTouchStart!.y
@@ -174,8 +193,10 @@ class ScrollElement extends Component<Props, State> {
     if (this.scrollComponentRef.current) {
       this.scrollComponentRef.current.removeEventListener('wheel', this.handleWheel)
       this.scrollComponentRef.current.removeEventListener('itemInteraction', this.handleItemInteract)
-      this.scrollComponentRef.current.removeEventListener('touchstart',this.handleTouchStart)
-      this.scrollComponentRef.current.removeEventListener("touchmove",this.handleTouchMove)
+      this.scrollComponentRef.current.removeEventListener('pointerdown', this.handlePointerStart)
+      this.scrollComponentRef.current.removeEventListener('pointermove', this.handlePointerMove)
+      this.scrollComponentRef.current.removeEventListener('pointerup', this.handlePointerEnd)
+      this.scrollComponentRef.current.removeEventListener('pointerleave', this.handlePointerLeave)
     }
   }
 
@@ -196,13 +217,6 @@ class ScrollElement extends Component<Props, State> {
         data-testid="scroll-element"
         className="rct-scroll"
         style={scrollComponentStyle}
-        onMouseDown={this.handleMouseDown}
-        onMouseMove={this.handleMouseMove}
-        onMouseUp={this.handleMouseUp}
-        onMouseLeave={this.handleMouseLeave}
-//        onTouchStart={this.handleTouchStart}
-//         onTouchMove={this.handleTouchMove}
-        onTouchEnd={this.handleTouchEnd}
         onScroll={this.handleScroll}
       >
         {children}