[Bug] Echarts can't accurately(maybe naturally) handle MAC touchpad gestures.

fbcarpbf 于 2022-12-31 发布在 Echarts

关注(0)|答案(2)|浏览(157)

Version

5.3.3

Link to Minimal Reproduction

No response

Steps to Reproduce

1、Set dataZoom like this:

{
    type: 'slider',
    show: true,
    xAxisIndex: [0],
    start: 1,
    end: 35
  },
  {
    type: 'slider',
    show: true,
    yAxisIndex: [0],
    left: '93%',
    start: 29,
    end: 36
  },
  {
    type: 'inside',
    xAxisIndex: [0],
    start: 1,
    end: 35
  },
  {
    type: 'inside',
    yAxisIndex: [0],
    start: 29,
    end: 36
  }

Current Behavior

When I use MAC touchpad to scale and move it, I just can't move it all direction. It just treat the gesture as scaling instead moving.

Expected Behavior

I want to move the chart through the gesture all direction(up、down、left and right). And when I separate my fingers, I want to scale it. Just like Chrome DevTools's timeline in performance panel.

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

echarts

来源：https://github.com/apache/echarts/issues/17286

2条答案

按热度按时间

yyhrrdl81#

And I tried the option zoomOnMouseWheel: 'ctrl' , when I use touchpad. It works when scale but doesn't work when move.

赞(0）回复(0）举报 2022-12-31

jjjwad0x2#

And I find relative code in file src/component/helper/RoamController.ts .

private _mousewheelHandler(e: ZRElementEvent) {
        const shouldZoom = isAvailableBehavior('zoomOnMouseWheel', e, this._opt);
        const shouldMove = isAvailableBehavior('moveOnMouseWheel', e, this._opt);
        const wheelDelta = e.wheelDelta;
        const absWheelDeltaDelta = Math.abs(wheelDelta);
        const originX = e.offsetX;
        const originY = e.offsetY;

        // wheelDelta maybe -0 in chrome mac.
        if (wheelDelta === 0 || (!shouldZoom && !shouldMove)) {
            return;
        }

        if (shouldZoom) {
            // Convenience:
            // Mac and VM Windows on Mac: scroll up: zoom out.
            // Windows: scroll up: zoom in.

            // FIXME: Should do more test in different environment.
            // wheelDelta is too complicated in difference nvironment
            // (https://developer.mozilla.org/en-US/docs/Web/Events/mousewheel),
            // although it has been normallized by zrender.
            // wheelDelta of mouse wheel is bigger than touch pad.
            const factor = absWheelDeltaDelta > 3 ? 1.4 : absWheelDeltaDelta > 1 ? 1.2 : 1.1;
            const scale = wheelDelta > 0 ? factor : 1 / factor;
            checkPointerAndTrigger(this, 'zoom', 'zoomOnMouseWheel', e, {
                scale: scale, originX: originX, originY: originY, isAvailableBehavior: null
            });
        }

        if (shouldMove) {
            // FIXME: Should do more test in different environment.
            const absDelta = Math.abs(wheelDelta);
            // wheelDelta of mouse wheel is bigger than touch pad.
            const scrollDelta = (wheelDelta > 0 ? 1 : -1) * (absDelta > 3 ? 0.4 : absDelta > 1 ? 0.15 : 0.05);
            checkPointerAndTrigger(this, 'scrollMove', 'moveOnMouseWheel', e, {
                scrollDelta: scrollDelta, originX: originX, originY: originY, isAvailableBehavior: null
            });
        }
    }

Can we set a callback when mouse wheel ? So then I can use a custom function to handle the moving and scaling .