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>