Skip to content
Advertisement

Detect direction of touchpad swipe properly

I was able to scale in scale out x axis and y axis , Its working very good with arrow keys , I want to do that with touchpad aswel.I tried this below code ,its working but its not smooth .Sometimes when i zoom in X , its even zooming in Y and vice versa. window.addEventListener(‘mousewheel’, function(e) {

window.addEventListener('mousewheel', function(e) {
    e.preventDefault();


    yDelta = e.deltaY;
    xDelta = e.deltaX;



    if (yDelta < -1 && Math.round(xDelta) < 1) {
        zoomOutY();

    } else if (yDelta > 1 && Math.round(xDelta) < 1) {
        zoomInY();


    } else if (xDelta < -1 && Math.round(yDelta) < 1) {
        zoomOut();

    } else if (xDelta > -1 && Math.round(yDelta) < 1) {
        zoomIn();


    }

}, {
    passive: false
});

And Again Same issue with mousemove method , how to detect the 4 directions smoothly , below is my code.

    document.addEventListener('mousemove', mouseMoveMethod);
    document.addEventListener('mousedown', mouseDownMethod);
    document.addEventListener('mouseup', mouseUpMethod);
    // Prevent context menu popup, so we can move our mouse.
    document.addEventListener('contextmenu', function(e) {
        e.preventDefault();
        return false;
    }, false);

mouseMoveMethod = function(e) {

    if (e.ctrlKey || mouseIsHeld) {


        let offsetX = 0
        let offsetY = 0


        if (e.pageX > oldx && e.pageY == oldy) {
            direction = "East";
            offsetX -= 1


        } else if (e.pageX == oldx && e.pageY > oldy) {
            direction = "South";

            offsetY += 1


        } else if (e.pageX == oldx && e.pageY < oldy) {

            direction = "North";
            offsetY -= 1

        } else if (e.pageX < oldx && e.pageY == oldy) {
            offsetX += 1
            direction = "West";

        }


        updateKeyboardPan(offsetX, offsetY);

        oldx = e.pageX;
        oldy = e.pageY;

    })

Again in the above code I am able to find the direction , but its lagging and hanging in middle.Is this the right approach ? or can I improve my code to improve my swipe/mousewheel direction , thank you.

Advertisement

Answer

I found a quite interesting example of multi-touch trackpad gestures in JavaScript.

The code snippet below utilizes this for overriding LCJS chart interactions for trackpad. To me it seems to perform in a surprisingly intuitive manner for zooming in/out on pinch interaction (2 fingers, move to opposite directions) and panning with dragging 2 fingers in same direction.

I did not find any way to differentiate pinch interaction along X and Y separately, it seems that the JS events just get a single value for both, which is assigned to deltaY.

const {
  lightningChart
} = lcjs;

const {
  createProgressiveTraceGenerator
} = xydata;

const chart = lightningChart().ChartXY();
const series = chart.addLineSeries()

createProgressiveTraceGenerator()
  .setNumberOfPoints(1000)
  .generate()
  .toPromise()
  .then(data => {
    series.add(data)
  })
  
chart.setMouseInteractionWheelZoom(false)
chart.onSeriesBackgroundMouseWheel((_, e) => {
    const xInterval = chart.getDefaultAxisX().getInterval()
    const yInterval = chart.getDefaultAxisY().getInterval()
    if (e.ctrlKey) {
        // Zoom in / out (no separation of X or Y amount!)
        const zoomAmount = e.deltaY * 0.01
        chart.getDefaultAxisX().setInterval(xInterval.start + zoomAmount * (xInterval.end - xInterval.start), xInterval.end - zoomAmount * (xInterval.end - xInterval.start), false, true)
        chart.getDefaultAxisY().setInterval(yInterval.start + zoomAmount * (yInterval.end - yInterval.start), yInterval.end - zoomAmount * (yInterval.end - yInterval.start), false, true)
    } else {
        // Pan X and Y simultaneously.
        const panX = e.deltaX * 0.001 * (xInterval.end - xInterval.start)
        const panY = e.deltaY * -0.001 * (yInterval.end - yInterval.start)
        chart.getDefaultAxisX().setInterval(xInterval.start + panX, xInterval.end + panX, false, true)
        chart.getDefaultAxisY().setInterval(yInterval.start + panY, yInterval.end + panY, false, true)
    }

    e.preventDefault()
})
<script src="https://unpkg.com/@arction/xydata@1.4.0/dist/xydata.iife.js"></script>
<script src="https://unpkg.com/@arction/lcjs@3.0.0/dist/lcjs.iife.js"></script>
Advertisement