浏览代码

彻底修复拖拽问题。

skyffire 1 年之前
父节点
当前提交
3f46974ee7
共有 1 个文件被更改,包括 12 次插入9 次删除
  1. 12 9
      src/index.js

+ 12 - 9
src/index.js

@@ -142,8 +142,10 @@ export default class StockHeatmap extends React.Component {
    */
   eventMouseDown = (e) => {
     // console.log('eventMouseDown', e);
-    this.isMouseDown = true;
-    this.mouseDownX = e.x;
+    if (!this.isMouseDown) {
+      this.isMouseDown = true;
+      this.mouseDownX = e.clientX;
+    }
   }
 
   /**
@@ -151,20 +153,21 @@ export default class StockHeatmap extends React.Component {
    * @param {MouseEvent} e
    */
   eventMouseMove = (e) => {
-    // 判断鼠标拖拽距离
-    const dragLength = e.x - this.mouseDownX;
-    if (this.isMouseDown && dragLength > 60) {
+    // 判断鼠标拖拽距离,这个只是判断拖拽是否满足阈值,使其画面滚动暂停
+    const downDragLength = Math.abs(e.clientX - this.mouseDownX);
+    if (this.isMouseDown && downDragLength > 200) {
       this.props.toggleAutoScroll(false)
     }
 
     // 其他事件处理
     if (this.isMouseDown && this.xScale) {
-      // Mouse drag, scroll the time series
-      const moveDataPointsCount = Math.floor(Math.abs(dragLength) / this.xScale.bandwidth());
-      if (moveDataPointsCount > 0) this.mouseDownX = e.x;
+      // Mouse drag, scroll the time series,距离上一次移动视野的鼠标拖拽距离
+      const dragX = e.clientX - this.mouse.x;
+      const moveDataPointsCount = Math.floor(Math.abs(dragX) / this.xScale.bandwidth());
+      if (moveDataPointsCount > 0) this.mouse.x = e.x
       // const moveDataPointDirection = dragLength >= 0 ? 'right' : 'left';
       // console.log('drag x=', dragLength, moveDataPointsCount, this.windowPosition);
-      this.moveDataWindow(this.windowPosition + moveDataPointsCount * (dragLength >= 0 ? -1 : 1));
+      this.moveDataWindow(this.windowPosition + moveDataPointsCount * (dragX >= 0 ? -1 : 1));
     } else {
       if (e.clientX < this.defaults.hmWidth() && e.clientY < this.defaults.hmHeight()) {
         this.mouse = {