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

View File

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

View File

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