Add Keyboard zoom plugin (#1316)

src/components/Logs/LogCanvas.tsx

@@ -6,6 +6,8 @@ import UplotReact from 'uplot-react';
 import { Colors } from '../../utils/colors';
 import { colorHsl, formatNumberMs } from '../../utils/numbers';
 import { isNumber } from '../../utils/tune/expression';
+
+import keyboardZoomPanPlugin from '../../utils/uPlot/keyboardZoomPanPlugin';
 import mouseZoomPlugin from '../../utils/uPlot/mouseZoomPlugin';
 import touchZoomPlugin from '../../utils/uPlot/touchZoomPlugin';
 
@@ -145,7 +147,7 @@ const LogCanvas = ({
             sync: { key: plotSyncKey },
             points: { size: 7 },
           },
-          plugins: [touchZoomPlugin(), mouseZoomPlugin()],
+          plugins: [touchZoomPlugin(), mouseZoomPlugin(), keyboardZoomPanPlugin()],
         },
       };
     },

src/components/TriggerLogs/CompositeCanvas.tsx

@@ -3,6 +3,7 @@ import uPlot from 'uplot';
 import UplotReact from 'uplot-react';
 import { Colors } from '../../utils/colors';
 import { CompositeLogEntry } from '../../utils/logs/TriggerLogsParser';
+import keyboardZoomPanPlugin from '../../utils/uPlot/keyboardZoomPanPlugin';
 import mouseZoomPlugin from '../../utils/uPlot/mouseZoomPlugin';
 import touchZoomPlugin from '../../utils/uPlot/touchZoomPlugin';
 import LogsPagination from './LogsPagination';
@@ -104,7 +105,7 @@ const CompositeCanvas = ({ data, width, height }: Props) => {
         drag: { y: false },
         points: { size: 7 },
       },
-      plugins: [touchZoomPlugin(), mouseZoomPlugin()],
+      plugins: [touchZoomPlugin(), mouseZoomPlugin(), keyboardZoomPanPlugin()],
     });
   }, [data, width, height, indexFrom, indexTo]);
 

src/components/TriggerLogs/ToothCanvas.tsx

@@ -3,8 +3,10 @@ import uPlot from 'uplot';
 import UplotReact from 'uplot-react';
 import { Colors } from '../../utils/colors';
 import { EntryType, ToothLogEntry } from '../../utils/logs/TriggerLogsParser';
+import keyboardZoomPanPlugin from '../../utils/uPlot/keyboardZoomPanPlugin';
 import mouseZoomPlugin from '../../utils/uPlot/mouseZoomPlugin';
 import touchZoomPlugin from '../../utils/uPlot/touchZoomPlugin';
+
 import LogsPagination from './LogsPagination';
 
 const { bars } = uPlot.paths;
@@ -70,7 +72,7 @@ const ToothCanvas = ({ data, width, height }: Props) => {
         drag: { y: false },
         points: { size: 7 },
       },
-      plugins: [touchZoomPlugin(), mouseZoomPlugin()],
+      plugins: [touchZoomPlugin(), mouseZoomPlugin(), keyboardZoomPanPlugin()],
     });
   }, [data, width, height, indexFrom, indexTo]);
 

src/utils/uPlot/keyboardZoomPanPlugin.ts

@@ -0,0 +1,61 @@
+import uPlot, { Plugin } from 'uplot';
+
+interface KeyboardZoomPluginOptions {
+  zoomFactor?: number;
+  scrollFactor?: number;
+}
+
+const ARROW_UP = 'ArrowUp';
+const ARROW_DOWN = 'ArrowDown';
+const ARROW_LEFT = 'ArrowLeft';
+const ARROW_RIGHT = 'ArrowRight';
+
+function keyboardZoomPlugin(options: KeyboardZoomPluginOptions = {}): Plugin {
+  const { zoomFactor = 0.9 } = options;
+
+  return {
+    hooks: {
+      ready(u: uPlot) {
+        document.addEventListener('keydown', (e: KeyboardEvent) => {
+          if (!e.ctrlKey && !e.metaKey) {
+            e.preventDefault();
+
+            const cursor = u.cursor;
+            const { left, top } = cursor;
+            const xVal = u.posToVal(left || 0, 'x');
+            const yVal = u.posToVal(top || 0, 'y');
+
+            const xRange = (u.scales.x.max ?? 0) - (u.scales.x.min ?? 0);
+            const yRange = (u.scales.y.max ?? 0) - (u.scales.y.min ?? 0);
+
+            if (e.key === ARROW_UP || e.key === ARROW_DOWN) {
+              const zoomOut = e.key === ARROW_DOWN;
+              const newZoomFactor = zoomOut ? 1 / zoomFactor : zoomFactor;
+
+              const nxRange = xRange * newZoomFactor;
+              const nxMin = xVal - (xVal - (u.scales.x.min ?? 0)) * newZoomFactor;
+
+              const nyRange = yRange * newZoomFactor;
+              const nyMin = yVal - (yVal - (u.scales.y.min ?? 0)) * newZoomFactor;
+
+              u.batch(() => {
+                u.setScale('x', { min: nxMin, max: nxMin + nxRange });
+                u.setScale('y', { min: nyMin, max: nyMin + nyRange });
+              });
+            } else if (e.key === ARROW_LEFT || e.key === ARROW_RIGHT) {
+              const scrollDirection = e.key === ARROW_LEFT ? -1 : 1;
+              const scrollAmount = (xRange / 10) * scrollDirection;
+              const nxMin = (u.scales.x.min ?? 0) + scrollAmount;
+
+              u.batch(() => {
+                u.setScale('x', { min: nxMin, max: nxMin + xRange });
+              });
+            }
+          }
+        });
+      },
+    },
+  };
+}
+
+export default keyboardZoomPlugin;