1
0
mirror of https://github.com/AvengeMedia/DankMaterialShell.git synced 2025-12-05 21:15:38 -05:00

flickable: update momentum scrolling logic

This commit is contained in:
bbedward
2025-12-05 10:14:16 -05:00
parent 5faa1a993a
commit c69a55df29
3 changed files with 254 additions and 249 deletions

View File

@@ -1,6 +1,5 @@
import QtQuick import QtQuick
import QtQuick.Controls import QtQuick.Controls
import qs.Common
import qs.Widgets import qs.Widgets
Flickable { Flickable {
@@ -24,7 +23,7 @@ Flickable {
WheelHandler { WheelHandler {
id: wheelHandler id: wheelHandler
property real touchpadSpeed: 1.8 property real touchpadSpeed: 2.8
property real momentumRetention: 0.92 property real momentumRetention: 0.92
property real lastWheelTime: 0 property real lastWheelTime: 0
property real momentum: 0 property real momentum: 0
@@ -32,102 +31,104 @@ Flickable {
property bool sessionUsedMouseWheel: false property bool sessionUsedMouseWheel: false
function startMomentum() { function startMomentum() {
flickable.isMomentumActive = true flickable.isMomentumActive = true;
momentumTimer.start() momentumTimer.start();
} }
acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
onWheel: event => { onWheel: event => {
vbar._scrollBarActive = true vbar._scrollBarActive = true;
vbar.hideTimer.restart() vbar.hideTimer.restart();
const currentTime = Date.now() const currentTime = Date.now();
const timeDelta = currentTime - lastWheelTime const timeDelta = currentTime - lastWheelTime;
lastWheelTime = currentTime lastWheelTime = currentTime;
const deltaY = event.angleDelta.y const hasPixel = event.pixelDelta && event.pixelDelta.y !== 0;
const isMouseWheel = Math.abs(deltaY) >= 120 && (Math.abs(deltaY) % 120) === 0 const hasAngle = event.angleDelta && event.angleDelta.y !== 0;
const deltaY = event.angleDelta.y;
const isMouseWheel = !hasPixel && hasAngle;
if (isMouseWheel) { if (isMouseWheel) {
sessionUsedMouseWheel = true sessionUsedMouseWheel = true;
momentumTimer.stop() momentumTimer.stop();
flickable.isMomentumActive = false flickable.isMomentumActive = false;
velocitySamples = [] velocitySamples = [];
momentum = 0 momentum = 0;
flickable.momentumVelocity = 0 flickable.momentumVelocity = 0;
const lines = Math.floor(Math.abs(deltaY) / 120) const lines = Math.floor(Math.abs(deltaY) / 120);
const scrollAmount = (deltaY > 0 ? -lines : lines) * flickable.mouseWheelSpeed const scrollAmount = (deltaY > 0 ? -lines : lines) * flickable.mouseWheelSpeed;
let newY = flickable.contentY + scrollAmount let newY = flickable.contentY + scrollAmount;
newY = Math.max(0, Math.min(flickable.contentHeight - flickable.height, newY)) newY = Math.max(0, Math.min(flickable.contentHeight - flickable.height, newY));
if (flickable.flicking) { if (flickable.flicking) {
flickable.cancelFlick() flickable.cancelFlick();
} }
flickable.contentY = newY flickable.contentY = newY;
} else { } else {
sessionUsedMouseWheel = false sessionUsedMouseWheel = false;
momentumTimer.stop() momentumTimer.stop();
flickable.isMomentumActive = false flickable.isMomentumActive = false;
let delta = 0 let delta = 0;
if (event.pixelDelta.y !== 0) { if (event.pixelDelta.y !== 0) {
delta = event.pixelDelta.y * touchpadSpeed delta = event.pixelDelta.y * touchpadSpeed;
} else { } else {
delta = event.angleDelta.y / 8 * touchpadSpeed delta = event.angleDelta.y / 8 * touchpadSpeed;
} }
velocitySamples.push({ velocitySamples.push({
"delta": delta, "delta": delta,
"time": currentTime "time": currentTime
}) });
velocitySamples = velocitySamples.filter(s => currentTime - s.time < 100) velocitySamples = velocitySamples.filter(s => currentTime - s.time < 100);
if (velocitySamples.length > 1) { if (velocitySamples.length > 1) {
const totalDelta = velocitySamples.reduce((sum, s) => sum + s.delta, 0) const totalDelta = velocitySamples.reduce((sum, s) => sum + s.delta, 0);
const timeSpan = currentTime - velocitySamples[0].time const timeSpan = currentTime - velocitySamples[0].time;
if (timeSpan > 0) { if (timeSpan > 0) {
flickable.momentumVelocity = Math.max(-flickable.maxMomentumVelocity, Math.min(flickable.maxMomentumVelocity, totalDelta / timeSpan * 1000)) flickable.momentumVelocity = Math.max(-flickable.maxMomentumVelocity, Math.min(flickable.maxMomentumVelocity, totalDelta / timeSpan * 1000));
} }
} }
if (event.pixelDelta.y !== 0 && timeDelta < 50) { if (event.pixelDelta.y !== 0 && timeDelta < 50) {
momentum = momentum * momentumRetention + delta * 0.15 momentum = momentum * momentumRetention + delta * 0.15;
delta += momentum delta += momentum;
} else { } else {
momentum = 0 momentum = 0;
} }
let newY = flickable.contentY - delta let newY = flickable.contentY - delta;
newY = Math.max(0, Math.min(flickable.contentHeight - flickable.height, newY)) newY = Math.max(0, Math.min(flickable.contentHeight - flickable.height, newY));
if (flickable.flicking) { if (flickable.flicking) {
flickable.cancelFlick() flickable.cancelFlick();
} }
flickable.contentY = newY flickable.contentY = newY;
} }
event.accepted = true event.accepted = true;
} }
onActiveChanged: { onActiveChanged: {
if (!active) { if (!active) {
if (!sessionUsedMouseWheel && Math.abs(flickable.momentumVelocity) >= flickable.minMomentumVelocity) { if (!sessionUsedMouseWheel && Math.abs(flickable.momentumVelocity) >= flickable.minMomentumVelocity) {
startMomentum() startMomentum();
} else { } else {
velocitySamples = [] velocitySamples = [];
flickable.momentumVelocity = 0 flickable.momentumVelocity = 0;
} }
} }
} }
} }
onMovementStarted: { onMovementStarted: {
vbar._scrollBarActive = true vbar._scrollBarActive = true;
vbar.hideTimer.stop() vbar.hideTimer.stop();
} }
onMovementEnded: vbar.hideTimer.restart() onMovementEnded: vbar.hideTimer.restart()
@@ -137,24 +138,24 @@ Flickable {
repeat: true repeat: true
onTriggered: { onTriggered: {
const newY = flickable.contentY - flickable.momentumVelocity * 0.016 const newY = flickable.contentY - flickable.momentumVelocity * 0.016;
const maxY = Math.max(0, flickable.contentHeight - flickable.height) const maxY = Math.max(0, flickable.contentHeight - flickable.height);
if (newY < 0 || newY > maxY) { if (newY < 0 || newY > maxY) {
flickable.contentY = newY < 0 ? 0 : maxY flickable.contentY = newY < 0 ? 0 : maxY;
stop() stop();
flickable.isMomentumActive = false flickable.isMomentumActive = false;
flickable.momentumVelocity = 0 flickable.momentumVelocity = 0;
return return;
} }
flickable.contentY = newY flickable.contentY = newY;
flickable.momentumVelocity *= flickable.friction flickable.momentumVelocity *= flickable.friction;
if (Math.abs(flickable.momentumVelocity) < 5) { if (Math.abs(flickable.momentumVelocity) < 5) {
stop() stop();
flickable.isMomentumActive = false flickable.isMomentumActive = false;
flickable.momentumVelocity = 0 flickable.momentumVelocity = 0;
} }
} }
} }

View File

@@ -19,8 +19,8 @@ GridView {
flickableDirection: Flickable.VerticalFlick flickableDirection: Flickable.VerticalFlick
onMovementStarted: { onMovementStarted: {
vbar._scrollBarActive = true vbar._scrollBarActive = true;
vbar.hideTimer.stop() vbar.hideTimer.stop();
} }
onMovementEnded: vbar.hideTimer.restart() onMovementEnded: vbar.hideTimer.restart()
@@ -28,7 +28,7 @@ GridView {
id: wheelHandler id: wheelHandler
property real mouseWheelSpeed: 60 property real mouseWheelSpeed: 60
property real touchpadSpeed: 1.8 property real touchpadSpeed: 2.8
property real momentumRetention: 0.92 property real momentumRetention: 0.92
property real lastWheelTime: 0 property real lastWheelTime: 0
property real momentum: 0 property real momentum: 0
@@ -36,87 +36,89 @@ GridView {
property bool sessionUsedMouseWheel: false property bool sessionUsedMouseWheel: false
function startMomentum() { function startMomentum() {
isMomentumActive = true isMomentumActive = true;
momentumTimer.start() momentumTimer.start();
} }
acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
onWheel: event => { onWheel: event => {
vbar._scrollBarActive = true vbar._scrollBarActive = true;
vbar.hideTimer.restart() vbar.hideTimer.restart();
const currentTime = Date.now() const currentTime = Date.now();
const timeDelta = currentTime - lastWheelTime const timeDelta = currentTime - lastWheelTime;
lastWheelTime = currentTime lastWheelTime = currentTime;
const deltaY = event.angleDelta.y const hasPixel = event.pixelDelta && event.pixelDelta.y !== 0;
const isMouseWheel = Math.abs(deltaY) >= 120 && (Math.abs(deltaY) % 120) === 0 const hasAngle = event.angleDelta && event.angleDelta.y !== 0;
const deltaY = event.angleDelta.y;
const isMouseWheel = !hasPixel && hasAngle;
if (isMouseWheel) { if (isMouseWheel) {
sessionUsedMouseWheel = true sessionUsedMouseWheel = true;
momentumTimer.stop() momentumTimer.stop();
isMomentumActive = false isMomentumActive = false;
velocitySamples = [] velocitySamples = [];
momentum = 0 momentum = 0;
momentumVelocity = 0 momentumVelocity = 0;
const lines = Math.floor(Math.abs(deltaY) / 120) const lines = Math.floor(Math.abs(deltaY) / 120);
const scrollAmount = (deltaY > 0 ? -lines : lines) * cellHeight * 0.35 const scrollAmount = (deltaY > 0 ? -lines : lines) * cellHeight * 0.35;
let newY = contentY + scrollAmount let newY = contentY + scrollAmount;
newY = Math.max(0, Math.min(contentHeight - height, newY)) newY = Math.max(0, Math.min(contentHeight - height, newY));
if (flicking) { if (flicking) {
cancelFlick() cancelFlick();
} }
contentY = newY contentY = newY;
} else { } else {
sessionUsedMouseWheel = false sessionUsedMouseWheel = false;
momentumTimer.stop() momentumTimer.stop();
isMomentumActive = false isMomentumActive = false;
let delta = event.pixelDelta.y !== 0 ? event.pixelDelta.y * touchpadSpeed : event.angleDelta.y / 120 * cellHeight * 1.2 let delta = event.pixelDelta.y !== 0 ? event.pixelDelta.y * touchpadSpeed : event.angleDelta.y / 120 * cellHeight * 1.2;
velocitySamples.push({ velocitySamples.push({
"delta": delta, "delta": delta,
"time": currentTime "time": currentTime
}) });
velocitySamples = velocitySamples.filter(s => currentTime - s.time < 100) velocitySamples = velocitySamples.filter(s => currentTime - s.time < 100);
if (velocitySamples.length > 1) { if (velocitySamples.length > 1) {
const totalDelta = velocitySamples.reduce((sum, s) => sum + s.delta, 0) const totalDelta = velocitySamples.reduce((sum, s) => sum + s.delta, 0);
const timeSpan = currentTime - velocitySamples[0].time const timeSpan = currentTime - velocitySamples[0].time;
if (timeSpan > 0) { if (timeSpan > 0) {
momentumVelocity = Math.max(-maxMomentumVelocity, Math.min(maxMomentumVelocity, totalDelta / timeSpan * 1000)) momentumVelocity = Math.max(-maxMomentumVelocity, Math.min(maxMomentumVelocity, totalDelta / timeSpan * 1000));
} }
} }
if (event.pixelDelta.y !== 0 && timeDelta < 50) { if (event.pixelDelta.y !== 0 && timeDelta < 50) {
momentum = momentum * momentumRetention + delta * 0.15 momentum = momentum * momentumRetention + delta * 0.15;
delta += momentum delta += momentum;
} else { } else {
momentum = 0 momentum = 0;
} }
let newY = contentY - delta let newY = contentY - delta;
newY = Math.max(0, Math.min(contentHeight - height, newY)) newY = Math.max(0, Math.min(contentHeight - height, newY));
if (flicking) { if (flicking) {
cancelFlick() cancelFlick();
} }
contentY = newY contentY = newY;
} }
event.accepted = true event.accepted = true;
} }
onActiveChanged: { onActiveChanged: {
if (!active) { if (!active) {
if (!sessionUsedMouseWheel && Math.abs(momentumVelocity) >= minMomentumVelocity) { if (!sessionUsedMouseWheel && Math.abs(momentumVelocity) >= minMomentumVelocity) {
startMomentum() startMomentum();
} else { } else {
velocitySamples = [] velocitySamples = [];
momentumVelocity = 0 momentumVelocity = 0;
} }
} }
} }
@@ -127,24 +129,24 @@ GridView {
interval: 16 interval: 16
repeat: true repeat: true
onTriggered: { onTriggered: {
const newY = contentY - momentumVelocity * 0.016 const newY = contentY - momentumVelocity * 0.016;
const maxY = Math.max(0, contentHeight - height) const maxY = Math.max(0, contentHeight - height);
if (newY < 0 || newY > maxY) { if (newY < 0 || newY > maxY) {
contentY = newY < 0 ? 0 : maxY contentY = newY < 0 ? 0 : maxY;
stop() stop();
isMomentumActive = false isMomentumActive = false;
momentumVelocity = 0 momentumVelocity = 0;
return return;
} }
contentY = newY contentY = newY;
momentumVelocity *= friction momentumVelocity *= friction;
if (Math.abs(momentumVelocity) < 5) { if (Math.abs(momentumVelocity) < 5) {
stop() stop();
isMomentumActive = false isMomentumActive = false;
momentumVelocity = 0 momentumVelocity = 0;
} }
} }
} }

View File

@@ -23,130 +23,132 @@ ListView {
flickableDirection: Flickable.VerticalFlick flickableDirection: Flickable.VerticalFlick
onMovementStarted: { onMovementStarted: {
isUserScrolling = true isUserScrolling = true;
vbar._scrollBarActive = true vbar._scrollBarActive = true;
vbar.hideTimer.stop() vbar.hideTimer.stop();
} }
onMovementEnded: { onMovementEnded: {
isUserScrolling = false isUserScrolling = false;
vbar.hideTimer.restart() vbar.hideTimer.restart();
} }
onContentYChanged: { onContentYChanged: {
if (!justChanged && isUserScrolling) { if (!justChanged && isUserScrolling) {
savedY = contentY savedY = contentY;
} }
justChanged = false justChanged = false;
} }
onModelChanged: { onModelChanged: {
justChanged = true justChanged = true;
contentY = savedY contentY = savedY;
} }
WheelHandler { WheelHandler {
id: wheelHandler id: wheelHandler
property real touchpadSpeed: 1.8 property real touchpadSpeed: 2.8
property real lastWheelTime: 0 property real lastWheelTime: 0
property real momentum: 0 property real momentum: 0
property var velocitySamples: [] property var velocitySamples: []
property bool sessionUsedMouseWheel: false property bool sessionUsedMouseWheel: false
function startMomentum() { function startMomentum() {
isMomentumActive = true isMomentumActive = true;
momentumTimer.start() momentumTimer.start();
} }
acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
onWheel: event => { onWheel: event => {
isUserScrolling = true isUserScrolling = true;
vbar._scrollBarActive = true vbar._scrollBarActive = true;
vbar.hideTimer.restart() vbar.hideTimer.restart();
const currentTime = Date.now() const currentTime = Date.now();
const timeDelta = currentTime - lastWheelTime const timeDelta = currentTime - lastWheelTime;
lastWheelTime = currentTime lastWheelTime = currentTime;
const deltaY = event.angleDelta.y const hasPixel = event.pixelDelta && event.pixelDelta.y !== 0;
const isMouseWheel = Math.abs(deltaY) >= 120 && (Math.abs(deltaY) % 120) === 0 const hasAngle = event.angleDelta && event.angleDelta.y !== 0;
const deltaY = event.angleDelta.y;
const isMouseWheel = !hasPixel && hasAngle;
if (isMouseWheel) { if (isMouseWheel) {
sessionUsedMouseWheel = true sessionUsedMouseWheel = true;
momentumTimer.stop() momentumTimer.stop();
isMomentumActive = false isMomentumActive = false;
velocitySamples = [] velocitySamples = [];
momentum = 0 momentum = 0;
momentumVelocity = 0 momentumVelocity = 0;
const lines = Math.floor(Math.abs(deltaY) / 120) const lines = Math.floor(Math.abs(deltaY) / 120);
const scrollAmount = (deltaY > 0 ? -lines : lines) * mouseWheelSpeed const scrollAmount = (deltaY > 0 ? -lines : lines) * mouseWheelSpeed;
let newY = listView.contentY + scrollAmount let newY = listView.contentY + scrollAmount;
const maxY = Math.max(0, listView.contentHeight - listView.height + listView.originY) const maxY = Math.max(0, listView.contentHeight - listView.height + listView.originY);
newY = Math.max(listView.originY, Math.min(maxY, newY)) newY = Math.max(listView.originY, Math.min(maxY, newY));
if (listView.flicking) { if (listView.flicking) {
listView.cancelFlick() listView.cancelFlick();
} }
listView.contentY = newY listView.contentY = newY;
savedY = newY savedY = newY;
} else { } else {
sessionUsedMouseWheel = false sessionUsedMouseWheel = false;
momentumTimer.stop() momentumTimer.stop();
isMomentumActive = false isMomentumActive = false;
let delta = 0 let delta = 0;
if (event.pixelDelta.y !== 0) { if (event.pixelDelta.y !== 0) {
delta = event.pixelDelta.y * touchpadSpeed delta = event.pixelDelta.y * touchpadSpeed;
} else { } else {
delta = event.angleDelta.y / 8 * touchpadSpeed delta = event.angleDelta.y / 8 * touchpadSpeed;
} }
velocitySamples.push({ velocitySamples.push({
"delta": delta, "delta": delta,
"time": currentTime "time": currentTime
}) });
velocitySamples = velocitySamples.filter(s => currentTime - s.time < 100) velocitySamples = velocitySamples.filter(s => currentTime - s.time < 100);
if (velocitySamples.length > 1) { if (velocitySamples.length > 1) {
const totalDelta = velocitySamples.reduce((sum, s) => sum + s.delta, 0) const totalDelta = velocitySamples.reduce((sum, s) => sum + s.delta, 0);
const timeSpan = currentTime - velocitySamples[0].time const timeSpan = currentTime - velocitySamples[0].time;
if (timeSpan > 0) { if (timeSpan > 0) {
momentumVelocity = Math.max(-maxMomentumVelocity, Math.min(maxMomentumVelocity, totalDelta / timeSpan * 1000)) momentumVelocity = Math.max(-maxMomentumVelocity, Math.min(maxMomentumVelocity, totalDelta / timeSpan * 1000));
} }
} }
if (event.pixelDelta.y !== 0 && timeDelta < 50) { if (event.pixelDelta.y !== 0 && timeDelta < 50) {
momentum = momentum * 0.92 + delta * 0.15 momentum = momentum * 0.92 + delta * 0.15;
delta += momentum delta += momentum;
} else { } else {
momentum = 0 momentum = 0;
} }
let newY = listView.contentY - delta let newY = listView.contentY - delta;
const maxY = Math.max(0, listView.contentHeight - listView.height + listView.originY) const maxY = Math.max(0, listView.contentHeight - listView.height + listView.originY);
newY = Math.max(listView.originY, Math.min(maxY, newY)) newY = Math.max(listView.originY, Math.min(maxY, newY));
if (listView.flicking) { if (listView.flicking) {
listView.cancelFlick() listView.cancelFlick();
} }
listView.contentY = newY listView.contentY = newY;
savedY = newY savedY = newY;
} }
event.accepted = true event.accepted = true;
} }
onActiveChanged: { onActiveChanged: {
if (!active) { if (!active) {
isUserScrolling = false isUserScrolling = false;
if (!sessionUsedMouseWheel && Math.abs(momentumVelocity) >= minMomentumVelocity) { if (!sessionUsedMouseWheel && Math.abs(momentumVelocity) >= minMomentumVelocity) {
startMomentum() startMomentum();
} else { } else {
velocitySamples = [] velocitySamples = [];
momentumVelocity = 0 momentumVelocity = 0;
} }
} }
} }
@@ -158,27 +160,27 @@ ListView {
repeat: true repeat: true
onTriggered: { onTriggered: {
const newY = contentY - momentumVelocity * 0.016 const newY = contentY - momentumVelocity * 0.016;
const maxY = Math.max(0, contentHeight - height + originY) const maxY = Math.max(0, contentHeight - height + originY);
const minY = originY const minY = originY;
if (newY < minY || newY > maxY) { if (newY < minY || newY > maxY) {
contentY = newY < minY ? minY : maxY contentY = newY < minY ? minY : maxY;
savedY = contentY savedY = contentY;
stop() stop();
isMomentumActive = false isMomentumActive = false;
momentumVelocity = 0 momentumVelocity = 0;
return return;
} }
contentY = newY contentY = newY;
savedY = newY savedY = newY;
momentumVelocity *= friction momentumVelocity *= friction;
if (Math.abs(momentumVelocity) < 5) { if (Math.abs(momentumVelocity) < 5) {
stop() stop();
isMomentumActive = false isMomentumActive = false;
momentumVelocity = 0 momentumVelocity = 0;
} }
} }
} }