@fileverse-dev/fortune-react 1.2.95 → 1.2.96-scroll
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -62,6 +62,86 @@ export var useSmoothScroll = function useSmoothScroll(scrollContainerRef) {
|
|
|
62
62
|
}
|
|
63
63
|
};
|
|
64
64
|
}
|
|
65
|
+
function handleMouseDragScroll(containerEl, scrollHandler, getPixelScale) {
|
|
66
|
+
var isDragging = false;
|
|
67
|
+
var startY = 0;
|
|
68
|
+
var lastY = 0;
|
|
69
|
+
var velocityY = 0;
|
|
70
|
+
var autoScrollAnimationId = 0;
|
|
71
|
+
var lastMoveTime = 0;
|
|
72
|
+
var VELOCITY_SMOOTHING = 0.3;
|
|
73
|
+
var MIN_DRAG_THRESHOLD = 5;
|
|
74
|
+
var ACCELERATION_FACTOR = 1.02;
|
|
75
|
+
var MAX_VELOCITY = 50;
|
|
76
|
+
function stopAutoScroll() {
|
|
77
|
+
if (autoScrollAnimationId) {
|
|
78
|
+
cancelAnimationFrame(autoScrollAnimationId);
|
|
79
|
+
autoScrollAnimationId = 0;
|
|
80
|
+
}
|
|
81
|
+
velocityY = 0;
|
|
82
|
+
}
|
|
83
|
+
function autoScroll() {
|
|
84
|
+
if (!isDragging) {
|
|
85
|
+
stopAutoScroll();
|
|
86
|
+
return;
|
|
87
|
+
}
|
|
88
|
+
if (Math.abs(velocityY) > 0.1) {
|
|
89
|
+
velocityY *= ACCELERATION_FACTOR;
|
|
90
|
+
velocityY = Math.max(-MAX_VELOCITY, Math.min(MAX_VELOCITY, velocityY));
|
|
91
|
+
}
|
|
92
|
+
var scale = getPixelScale();
|
|
93
|
+
scrollHandler(0, velocityY * scale);
|
|
94
|
+
autoScrollAnimationId = requestAnimationFrame(autoScroll);
|
|
95
|
+
}
|
|
96
|
+
function onMouseDown(e) {
|
|
97
|
+
if (e.button !== 0) return;
|
|
98
|
+
var target = e.target;
|
|
99
|
+
if (target.tagName === 'INPUT' || target.tagName === 'BUTTON' || target.tagName === 'SELECT' || target.tagName === 'TEXTAREA' || target.closest('button') || target.closest('input')) {
|
|
100
|
+
return;
|
|
101
|
+
}
|
|
102
|
+
isDragging = true;
|
|
103
|
+
startY = e.clientY;
|
|
104
|
+
lastY = e.clientY;
|
|
105
|
+
lastMoveTime = performance.now();
|
|
106
|
+
velocityY = 0;
|
|
107
|
+
containerEl.style.cursor = 'grabbing';
|
|
108
|
+
e.preventDefault();
|
|
109
|
+
}
|
|
110
|
+
function onMouseMove(e) {
|
|
111
|
+
if (!isDragging) return;
|
|
112
|
+
var currentTime = performance.now();
|
|
113
|
+
var deltaTime = Math.max(1, currentTime - lastMoveTime);
|
|
114
|
+
var deltaY = e.clientY - lastY;
|
|
115
|
+
var totalMovedY = Math.abs(e.clientY - startY);
|
|
116
|
+
if (totalMovedY > MIN_DRAG_THRESHOLD) {
|
|
117
|
+
if (Math.abs(deltaY) > 0.1) {
|
|
118
|
+
var instantVelocityY = deltaY / deltaTime * 16;
|
|
119
|
+
velocityY = velocityY * (1 - VELOCITY_SMOOTHING) + instantVelocityY * VELOCITY_SMOOTHING;
|
|
120
|
+
}
|
|
121
|
+
if (!autoScrollAnimationId) {
|
|
122
|
+
autoScrollAnimationId = requestAnimationFrame(autoScroll);
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
lastY = e.clientY;
|
|
126
|
+
lastMoveTime = currentTime;
|
|
127
|
+
e.preventDefault();
|
|
128
|
+
}
|
|
129
|
+
function onMouseUp(e) {
|
|
130
|
+
if (!isDragging) return;
|
|
131
|
+
isDragging = false;
|
|
132
|
+
stopAutoScroll();
|
|
133
|
+
containerEl.style.cursor = '';
|
|
134
|
+
}
|
|
135
|
+
containerEl.addEventListener("mousedown", onMouseDown);
|
|
136
|
+
window.addEventListener("mousemove", onMouseMove);
|
|
137
|
+
window.addEventListener("mouseup", onMouseUp);
|
|
138
|
+
return function () {
|
|
139
|
+
stopAutoScroll();
|
|
140
|
+
containerEl.removeEventListener("mousedown", onMouseDown);
|
|
141
|
+
window.removeEventListener("mousemove", onMouseMove);
|
|
142
|
+
window.removeEventListener("mouseup", onMouseUp);
|
|
143
|
+
};
|
|
144
|
+
}
|
|
65
145
|
function handleMobileScroll(containerEl, scrollHandler, getPixelScale) {
|
|
66
146
|
var isScrolling = false;
|
|
67
147
|
var gestureStartClientX = 0;
|
|
@@ -210,9 +290,13 @@ export var useSmoothScroll = function useSmoothScroll(scrollContainerRef) {
|
|
|
210
290
|
var unmountMobileScrollHandler = handleMobileScroll(scrollContainerEl, scrollHandler, function () {
|
|
211
291
|
return (window.devicePixelRatio || 1) * context.zoomRatio;
|
|
212
292
|
});
|
|
293
|
+
var unmountMouseDragHandler = handleMouseDragScroll(scrollContainerEl, scrollHandler, function () {
|
|
294
|
+
return (window.devicePixelRatio || 1) * context.zoomRatio;
|
|
295
|
+
});
|
|
213
296
|
return function () {
|
|
214
297
|
unmountScrollHandler();
|
|
215
298
|
unmountMobileScrollHandler();
|
|
299
|
+
unmountMouseDragHandler();
|
|
216
300
|
};
|
|
217
301
|
}
|
|
218
302
|
useEffect(function () {
|
|
@@ -69,6 +69,86 @@ var useSmoothScroll = exports.useSmoothScroll = function useSmoothScroll(scrollC
|
|
|
69
69
|
}
|
|
70
70
|
};
|
|
71
71
|
}
|
|
72
|
+
function handleMouseDragScroll(containerEl, scrollHandler, getPixelScale) {
|
|
73
|
+
var isDragging = false;
|
|
74
|
+
var startY = 0;
|
|
75
|
+
var lastY = 0;
|
|
76
|
+
var velocityY = 0;
|
|
77
|
+
var autoScrollAnimationId = 0;
|
|
78
|
+
var lastMoveTime = 0;
|
|
79
|
+
var VELOCITY_SMOOTHING = 0.3;
|
|
80
|
+
var MIN_DRAG_THRESHOLD = 5;
|
|
81
|
+
var ACCELERATION_FACTOR = 1.02;
|
|
82
|
+
var MAX_VELOCITY = 50;
|
|
83
|
+
function stopAutoScroll() {
|
|
84
|
+
if (autoScrollAnimationId) {
|
|
85
|
+
cancelAnimationFrame(autoScrollAnimationId);
|
|
86
|
+
autoScrollAnimationId = 0;
|
|
87
|
+
}
|
|
88
|
+
velocityY = 0;
|
|
89
|
+
}
|
|
90
|
+
function autoScroll() {
|
|
91
|
+
if (!isDragging) {
|
|
92
|
+
stopAutoScroll();
|
|
93
|
+
return;
|
|
94
|
+
}
|
|
95
|
+
if (Math.abs(velocityY) > 0.1) {
|
|
96
|
+
velocityY *= ACCELERATION_FACTOR;
|
|
97
|
+
velocityY = Math.max(-MAX_VELOCITY, Math.min(MAX_VELOCITY, velocityY));
|
|
98
|
+
}
|
|
99
|
+
var scale = getPixelScale();
|
|
100
|
+
scrollHandler(0, velocityY * scale);
|
|
101
|
+
autoScrollAnimationId = requestAnimationFrame(autoScroll);
|
|
102
|
+
}
|
|
103
|
+
function onMouseDown(e) {
|
|
104
|
+
if (e.button !== 0) return;
|
|
105
|
+
var target = e.target;
|
|
106
|
+
if (target.tagName === 'INPUT' || target.tagName === 'BUTTON' || target.tagName === 'SELECT' || target.tagName === 'TEXTAREA' || target.closest('button') || target.closest('input')) {
|
|
107
|
+
return;
|
|
108
|
+
}
|
|
109
|
+
isDragging = true;
|
|
110
|
+
startY = e.clientY;
|
|
111
|
+
lastY = e.clientY;
|
|
112
|
+
lastMoveTime = performance.now();
|
|
113
|
+
velocityY = 0;
|
|
114
|
+
containerEl.style.cursor = 'grabbing';
|
|
115
|
+
e.preventDefault();
|
|
116
|
+
}
|
|
117
|
+
function onMouseMove(e) {
|
|
118
|
+
if (!isDragging) return;
|
|
119
|
+
var currentTime = performance.now();
|
|
120
|
+
var deltaTime = Math.max(1, currentTime - lastMoveTime);
|
|
121
|
+
var deltaY = e.clientY - lastY;
|
|
122
|
+
var totalMovedY = Math.abs(e.clientY - startY);
|
|
123
|
+
if (totalMovedY > MIN_DRAG_THRESHOLD) {
|
|
124
|
+
if (Math.abs(deltaY) > 0.1) {
|
|
125
|
+
var instantVelocityY = deltaY / deltaTime * 16;
|
|
126
|
+
velocityY = velocityY * (1 - VELOCITY_SMOOTHING) + instantVelocityY * VELOCITY_SMOOTHING;
|
|
127
|
+
}
|
|
128
|
+
if (!autoScrollAnimationId) {
|
|
129
|
+
autoScrollAnimationId = requestAnimationFrame(autoScroll);
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
lastY = e.clientY;
|
|
133
|
+
lastMoveTime = currentTime;
|
|
134
|
+
e.preventDefault();
|
|
135
|
+
}
|
|
136
|
+
function onMouseUp(e) {
|
|
137
|
+
if (!isDragging) return;
|
|
138
|
+
isDragging = false;
|
|
139
|
+
stopAutoScroll();
|
|
140
|
+
containerEl.style.cursor = '';
|
|
141
|
+
}
|
|
142
|
+
containerEl.addEventListener("mousedown", onMouseDown);
|
|
143
|
+
window.addEventListener("mousemove", onMouseMove);
|
|
144
|
+
window.addEventListener("mouseup", onMouseUp);
|
|
145
|
+
return function () {
|
|
146
|
+
stopAutoScroll();
|
|
147
|
+
containerEl.removeEventListener("mousedown", onMouseDown);
|
|
148
|
+
window.removeEventListener("mousemove", onMouseMove);
|
|
149
|
+
window.removeEventListener("mouseup", onMouseUp);
|
|
150
|
+
};
|
|
151
|
+
}
|
|
72
152
|
function handleMobileScroll(containerEl, scrollHandler, getPixelScale) {
|
|
73
153
|
var isScrolling = false;
|
|
74
154
|
var gestureStartClientX = 0;
|
|
@@ -217,9 +297,13 @@ var useSmoothScroll = exports.useSmoothScroll = function useSmoothScroll(scrollC
|
|
|
217
297
|
var unmountMobileScrollHandler = handleMobileScroll(scrollContainerEl, scrollHandler, function () {
|
|
218
298
|
return (window.devicePixelRatio || 1) * context.zoomRatio;
|
|
219
299
|
});
|
|
300
|
+
var unmountMouseDragHandler = handleMouseDragScroll(scrollContainerEl, scrollHandler, function () {
|
|
301
|
+
return (window.devicePixelRatio || 1) * context.zoomRatio;
|
|
302
|
+
});
|
|
220
303
|
return function () {
|
|
221
304
|
unmountScrollHandler();
|
|
222
305
|
unmountMobileScrollHandler();
|
|
306
|
+
unmountMouseDragHandler();
|
|
223
307
|
};
|
|
224
308
|
}
|
|
225
309
|
(0, _react.useEffect)(function () {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fileverse-dev/fortune-react",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.96-scroll",
|
|
4
4
|
"main": "lib/index.js",
|
|
5
5
|
"types": "lib/index.d.ts",
|
|
6
6
|
"module": "es/index.js",
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"tsc": "tsc"
|
|
17
17
|
},
|
|
18
18
|
"dependencies": {
|
|
19
|
-
"@fileverse-dev/fortune-core": "1.2.
|
|
19
|
+
"@fileverse-dev/fortune-core": "1.2.96-scroll",
|
|
20
20
|
"@fileverse/ui": "5.0.0",
|
|
21
21
|
"@tippyjs/react": "^4.2.6",
|
|
22
22
|
"@types/regenerator-runtime": "^0.13.6",
|