diff options
| author | Terry Truong <terry06890@gmail.com> | 2023-01-28 16:35:01 +1100 |
|---|---|---|
| committer | Terry Truong <terry06890@gmail.com> | 2023-01-28 16:38:20 +1100 |
| commit | 0647021d9b520e058923d2ed44fc487c513def5c (patch) | |
| tree | 94119852b3881e6d2975174f0e242f48d5c047a9 | |
| parent | 8687a7fafc1f200dad6eee9b5b7f3c7cdb2572a0 (diff) | |
Adjust mouse wheel handling
Account for horizontal mouse wheels
Use Ctrl for zooming, and Shift for panning
| -rw-r--r-- | src/components/IntroModal.vue | 8 | ||||
| -rw-r--r-- | src/components/TimeLine.vue | 15 |
2 files changed, 16 insertions, 7 deletions
diff --git a/src/components/IntroModal.vue b/src/components/IntroModal.vue index b8c0319..8d778f6 100644 --- a/src/components/IntroModal.vue +++ b/src/components/IntroModal.vue @@ -18,12 +18,14 @@ <span class="font-bold">Drag the screen</span> to move </li> <li v-else> - <span class="font-bold">Scroll</span> or - <span class="font-bold">press {{vert ? 'up & down': 'left & right'}}</span> + <span class="font-bold">Scroll</span> or press + <span class="font-bold">{{vert ? 'Up & Down': 'Left & Right'}}</span> to move </li> <li> - <span class="font-bold">{{touchDevice ? 'Pinch' : 'Hold shift'}}</span> to zoom in & out + <span v-if="touchDevice">Pinch</span> + <span v-else>Hold <span class="font-bold">Ctrl</span></span> + to zoom in & out </li> </ul> </div> diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue index 0cdd106..d0adfc0 100644 --- a/src/components/TimeLine.vue +++ b/src/components/TimeLine.vue @@ -2,7 +2,7 @@ <div class="relative overflow-hidden z-0" ref="rootRef" @pointerdown="onPointerDown" @pointermove="onPointerMove" @pointerup="onPointerUp" @pointercancel="onPointerUp" @pointerout="onPointerUp" @pointerleave="onPointerUp" - @wheel.exact="onWheel" @wheel.shift.exact="onShiftWheel" + @wheel.exact="onWheel" @wheel.shift.exact="onWheel" @wheel.ctrl.exact.prevent="onCtrlWheel" :style="{backgroundColor: !current && closeable ? 'rgba(0,0,0,0.3)' : store.color.bg}"> <!-- Event density indicators --> @@ -1303,11 +1303,18 @@ function onPointerUp(evt: PointerEvent){ } function onWheel(evt: WheelEvent){ - let shiftDir = (evt.deltaY > 0 ? 1 : -1) * (!vert.value ? -1 : 1); - panTimeline(shiftDir * store.scrollRatio); + if (Math.abs(evt.deltaY) > Math.abs(evt.deltaX)){ // Vertical wheel scroll + const shiftDir = (evt.deltaY > 0 ? 1 : -1) * (vert.value ? -1 : 1); + panTimeline(shiftDir * store.scrollRatio); + } else { // Horizontal wheel scroll + if (!vert.value){ + const shiftDir = evt.deltaX > 0 ? 1 : -1; + panTimeline(shiftDir * store.scrollRatio); + } + } } -function onShiftWheel(evt: WheelEvent){ +function onCtrlWheel(evt: WheelEvent){ let zoomRatio = evt.deltaY > 0 ? store.zoomRatio : 1/store.zoomRatio; zoomTimeline(zoomRatio, [pointerX, pointerY]); } |