Skip to content

Commit 34f6a74

Browse files
feat(timeline): add keyboard and scroll panning support
Enable horizontal scroll panning, Ctrl+scroll zooming, and keyboard navigation (arrow keys to pan, +/- to zoom) using vis-timeline's built-in options. Previously only click-and-drag was available. Closes #629
1 parent 1db85aa commit 34f6a74

2 files changed

Lines changed: 8 additions & 1 deletion

File tree

src/views/Timeline.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ div
5555
option(:value='1 * 60 * 60') 1+ hrs
5656
option(:value='2 * 60 * 60') 2+ hrs
5757
div(style="float: right; color: #999").d-inline-block.pt-3
58-
| Drag to pan and scroll to zoom
58+
| Scroll to pan, Ctrl+scroll to zoom, arrow keys to navigate
5959

6060
div(v-if="buckets !== null")
6161
div(style="clear: both")

src/visualizations/VisTimeline.vue

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,13 @@ export default {
102102
overflowMethod: 'flip',
103103
delay: 0,
104104
},
105+
// Keyboard & scroll navigation (see #629)
106+
horizontalScroll: true, // mouse wheel pans horizontally
107+
zoomKey: 'ctrlKey', // Ctrl+scroll to zoom (instead of plain scroll)
108+
keyboard: {
109+
enabled: true,
110+
speed: { x: 10, y: 0, zoom: 0.02 },
111+
},
105112
},
106113
editingEvent: null,
107114
editingEventBucket: null,

0 commit comments

Comments
 (0)