|
@@ -142,8 +142,10 @@ export default class StockHeatmap extends React.Component {
|
|
|
*/
|
|
*/
|
|
|
eventMouseDown = (e) => {
|
|
eventMouseDown = (e) => {
|
|
|
// console.log('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
|
|
* @param {MouseEvent} e
|
|
|
*/
|
|
*/
|
|
|
eventMouseMove = (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)
|
|
this.props.toggleAutoScroll(false)
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// 其他事件处理
|
|
// 其他事件处理
|
|
|
if (this.isMouseDown && this.xScale) {
|
|
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';
|
|
// const moveDataPointDirection = dragLength >= 0 ? 'right' : 'left';
|
|
|
// console.log('drag x=', dragLength, moveDataPointsCount, this.windowPosition);
|
|
// 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 {
|
|
} else {
|
|
|
if (e.clientX < this.defaults.hmWidth() && e.clientY < this.defaults.hmHeight()) {
|
|
if (e.clientX < this.defaults.hmWidth() && e.clientY < this.defaults.hmHeight()) {
|
|
|
this.mouse = {
|
|
this.mouse = {
|