add drag start thresholds

Author: maxlk

src/Rect/index.js

@@ -19,6 +19,8 @@ export default class Rect extends PureComponent {
     styles: PropTypes.object,
     zoomable: PropTypes.string,
     rotatable: PropTypes.bool,
+    dragStartThreshold: PropTypes.number,
+    dragStartTimeThreshold: PropTypes.number,
     onResizeStart: PropTypes.func,
     onResize: PropTypes.func,
     onResizeEnd: PropTypes.func,
@@ -35,24 +37,48 @@ export default class Rect extends PureComponent {
 
   // Drag
   startDrag = (e) => {
-    let { clientX: startX, clientY: startY } = e
-    this.props.onDragStart && this.props.onDragStart()
+    let { clientX: lastX, clientY: lastY } = e
     this._isMouseDown = true
+
+    let dragStarted = false
+    const { dragStartThreshold, dragStartTimeThreshold } = this.props
+    const startDragTimer = setTimeout(() => {
+      dragStarted = true
+      this.props.onDragStart && this.props.onDragStart()
+      this.props.onDrag(0, 0)
+    }, dragStartTimeThreshold)
+
     const onMove = (e) => {
       if (!this._isMouseDown) return // patch: fix windows press win key during mouseup issue
       e.stopImmediatePropagation()
       const { clientX, clientY } = e
-      const deltaX = clientX - startX
-      const deltaY = clientY - startY
+      const deltaX = clientX - lastX
+      const deltaY = clientY - lastY
+      lastX = clientX
+      lastY = clientY
+
+      if (!dragStarted) {
+        if (
+          Math.abs(deltaX) < dragStartThreshold &&
+          Math.abs(deltaY) < dragStartThreshold
+        ) {
+          return
+        }
+        dragStarted = true
+        this.props.onDragStart && this.props.onDragStart()
+      }
+
       this.props.onDrag(deltaX, deltaY)
-      startX = clientX
-      startY = clientY
     }
     const onUp = () => {
       document.removeEventListener('mousemove', onMove)
       document.removeEventListener('mouseup', onUp)
       if (!this._isMouseDown) return
       this._isMouseDown = false
+      if (!dragStarted) {
+        clearTimeout(startDragTimer)
+        return
+      }
       this.props.onDragEnd && this.props.onDragEnd()
     }
     document.addEventListener('mousemove', onMove)

src/index.js

@@ -19,6 +19,8 @@ export default class ResizableRect extends Component {
       PropTypes.number,
       PropTypes.bool
     ]),
+    dragStartThreshold: PropTypes.number,
+    dragStartTimeThreshold: PropTypes.number,
     onRotateStart: PropTypes.func,
     onRotate: PropTypes.func,
     onRotateEnd: PropTypes.func,
@@ -36,7 +38,9 @@ export default class ResizableRect extends Component {
     rotatable: true,
     zoomable: '',
     minWidth: 10,
-    minHeight: 10
+    minHeight: 10,
+    dragStartThreshold: 3,
+    dragStartTimeThreshold: 1000
   }
 
   handleRotate = (angle, startAngle) => {
@@ -80,7 +84,7 @@ export default class ResizableRect extends Component {
 
   render () {
     const {
-      top, left, width, height, rotateAngle, parentRotateAngle, zoomable, rotatable,
+      top, left, width, height, rotateAngle, parentRotateAngle, zoomable, rotatable, dragStartThreshold, dragStartTimeThreshold,
       onRotate, onResizeStart, onResizeEnd, onRotateStart, onRotateEnd, onDragStart, onDragEnd
     } = this.props
 
@@ -92,6 +96,8 @@ export default class ResizableRect extends Component {
         zoomable={zoomable}
         rotatable={Boolean(rotatable && onRotate)}
         parentRotateAngle={parentRotateAngle}
+        dragStartThreshold={dragStartThreshold}
+        dragStartTimeThreshold={dragStartTimeThreshold}
 
         onResizeStart={onResizeStart}
         onResize={this.handleResize}