From 037fea3258d042190a6697a908bb0e6d522b41f1 Mon Sep 17 00:00:00 2001
From: mamane10 <abderrahmaneelmarchani@gmail.com>
Date: Wed, 17 Apr 2024 15:25:00 +0100
Subject: [PATCH] feat: zoom in/out of segments using mouse wheel

---
 src/timelines.js | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/src/timelines.js b/src/timelines.js
index 2d03dc1..10eb845 100644
--- a/src/timelines.js
+++ b/src/timelines.js
@@ -1169,6 +1169,36 @@ export default Kapsule({
         })
       )
 
+      state.graph.on("wheel", event => {
+        event.stopPropagation();
+        event.preventDefault();
+        const getPointerCoords = event => d3Pointer(event, state.graph.node());
+        if (event.altKey && event.ctrlKey) {
+
+          const pointerCoords = getPointerCoords(event);
+
+          let newDomainX;
+          if (event.deltaY < 0) {
+            // scrolling up
+            newDomainX = [pointerCoords[0] - event.pageY, pointerCoords[0] + event.pageY].sort(d3Ascending).map(state.xScale.invert);
+          } else {
+            // scrolling down
+            const minRange = d3Min(state.completeFlatData, d => d.timeRange[0]);
+            const maxRange = d3Max(state.completeFlatData, d => d.timeRange[1]);
+            let x0 = +state.zoomX[0] - event.pageX;
+            let x1 = +state.zoomX[1] + event.pageX;
+            x0 = x0 < minRange ? minRange : x0;
+            x1 = x1 > maxRange ? maxRange : x1;
+            newDomainX = [x0, x1];
+          }
+
+          state.svg.dispatch('zoom', { detail: {
+              zoomX: newDomainX,
+            }});
+
+        }
+      })
+
       timelines = timelines.merge(newSegments);
 
       timelines.transition().duration(state.transDuration)