@fileverse-dev/fortune-react 1.2.97 → 1.2.98
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,147 @@ export var useSmoothScroll = function useSmoothScroll(scrollContainerRef) {
|
|
|
62
62
|
}
|
|
63
63
|
};
|
|
64
64
|
}
|
|
65
|
+
function handleMouseDragScroll(containerEl, scrollHandler, getPixelScale) {
|
|
66
|
+
var isDragging = false;
|
|
67
|
+
var startX = 0;
|
|
68
|
+
var startY = 0;
|
|
69
|
+
var lastX = 0;
|
|
70
|
+
var lastY = 0;
|
|
71
|
+
var velocityX = 0;
|
|
72
|
+
var velocityY = 0;
|
|
73
|
+
var autoScrollAnimationId = 0;
|
|
74
|
+
var lastMoveTime = 0;
|
|
75
|
+
var scrollDirection = "none";
|
|
76
|
+
var VELOCITY_SMOOTHING = 0.3;
|
|
77
|
+
var MIN_DRAG_THRESHOLD = 5;
|
|
78
|
+
var ACCELERATION_FACTOR = 1.02;
|
|
79
|
+
var MAX_VELOCITY = 50;
|
|
80
|
+
var DIRECTION_LOCK_THRESHOLD = 1.5;
|
|
81
|
+
var EDGE_SCROLL_ZONE = 10;
|
|
82
|
+
function stopAutoScroll() {
|
|
83
|
+
if (autoScrollAnimationId) {
|
|
84
|
+
cancelAnimationFrame(autoScrollAnimationId);
|
|
85
|
+
autoScrollAnimationId = 0;
|
|
86
|
+
}
|
|
87
|
+
velocityX = 0;
|
|
88
|
+
velocityY = 0;
|
|
89
|
+
}
|
|
90
|
+
function autoScroll() {
|
|
91
|
+
if (!isDragging) {
|
|
92
|
+
stopAutoScroll();
|
|
93
|
+
return;
|
|
94
|
+
}
|
|
95
|
+
if (Math.abs(velocityX) > 0.1) {
|
|
96
|
+
velocityX *= ACCELERATION_FACTOR;
|
|
97
|
+
velocityX = Math.max(-MAX_VELOCITY, Math.min(MAX_VELOCITY, velocityX));
|
|
98
|
+
}
|
|
99
|
+
if (Math.abs(velocityY) > 0.1) {
|
|
100
|
+
velocityY *= ACCELERATION_FACTOR;
|
|
101
|
+
velocityY = Math.max(-MAX_VELOCITY, Math.min(MAX_VELOCITY, velocityY));
|
|
102
|
+
}
|
|
103
|
+
var scale = getPixelScale();
|
|
104
|
+
scrollHandler(velocityX * scale, velocityY * scale);
|
|
105
|
+
autoScrollAnimationId = requestAnimationFrame(autoScroll);
|
|
106
|
+
}
|
|
107
|
+
function onMouseDown(e) {
|
|
108
|
+
if (e.button !== 0) return;
|
|
109
|
+
var target = e.target;
|
|
110
|
+
if (target.tagName === "INPUT" || target.tagName === "BUTTON" || target.tagName === "SELECT" || target.tagName === "TEXTAREA" || target.closest("button") || target.closest("input")) {
|
|
111
|
+
return;
|
|
112
|
+
}
|
|
113
|
+
isDragging = true;
|
|
114
|
+
scrollDirection = "none";
|
|
115
|
+
startX = e.clientX;
|
|
116
|
+
startY = e.clientY;
|
|
117
|
+
lastX = e.clientX;
|
|
118
|
+
lastY = e.clientY;
|
|
119
|
+
lastMoveTime = performance.now();
|
|
120
|
+
velocityX = 0;
|
|
121
|
+
velocityY = 0;
|
|
122
|
+
containerEl.style.cursor = "grabbing";
|
|
123
|
+
e.preventDefault();
|
|
124
|
+
}
|
|
125
|
+
function onMouseMove(e) {
|
|
126
|
+
if (!isDragging) return;
|
|
127
|
+
var currentTime = performance.now();
|
|
128
|
+
var deltaTime = Math.max(1, currentTime - lastMoveTime);
|
|
129
|
+
var deltaX = e.clientX - lastX;
|
|
130
|
+
var deltaY = e.clientY - lastY;
|
|
131
|
+
var totalMovedX = e.clientX - startX;
|
|
132
|
+
var totalMovedY = e.clientY - startY;
|
|
133
|
+
var absMovedX = Math.abs(totalMovedX);
|
|
134
|
+
var absMovedY = Math.abs(totalMovedY);
|
|
135
|
+
var containerRect = containerEl.getBoundingClientRect();
|
|
136
|
+
var mouseX = e.clientX - containerRect.left;
|
|
137
|
+
var mouseY = e.clientY - containerRect.top;
|
|
138
|
+
var isNearLeftEdge = mouseX < EDGE_SCROLL_ZONE;
|
|
139
|
+
var isNearRightEdge = mouseX > containerRect.width - EDGE_SCROLL_ZONE;
|
|
140
|
+
var isNearTopEdge = mouseY < EDGE_SCROLL_ZONE;
|
|
141
|
+
var isNearBottomEdge = mouseY > containerRect.height - EDGE_SCROLL_ZONE;
|
|
142
|
+
if (scrollDirection === "none" && (absMovedX > MIN_DRAG_THRESHOLD || absMovedY > MIN_DRAG_THRESHOLD)) {
|
|
143
|
+
if (absMovedX > absMovedY * DIRECTION_LOCK_THRESHOLD) {
|
|
144
|
+
scrollDirection = "horizontal";
|
|
145
|
+
} else if (absMovedY > absMovedX * DIRECTION_LOCK_THRESHOLD) {
|
|
146
|
+
scrollDirection = "vertical";
|
|
147
|
+
} else {
|
|
148
|
+
scrollDirection = "none";
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
if (scrollDirection === "horizontal" || scrollDirection === "none") {
|
|
152
|
+
if (absMovedX > MIN_DRAG_THRESHOLD) {
|
|
153
|
+
if (isNearLeftEdge || isNearRightEdge) {
|
|
154
|
+
if (Math.abs(deltaX) > 0.1) {
|
|
155
|
+
var instantVelocityX = deltaX / deltaTime * 16;
|
|
156
|
+
velocityX = velocityX * (1 - VELOCITY_SMOOTHING) + instantVelocityX * VELOCITY_SMOOTHING;
|
|
157
|
+
}
|
|
158
|
+
if (!autoScrollAnimationId) {
|
|
159
|
+
autoScrollAnimationId = requestAnimationFrame(autoScroll);
|
|
160
|
+
}
|
|
161
|
+
} else {
|
|
162
|
+
velocityX = 0;
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
} else {
|
|
166
|
+
velocityX = 0;
|
|
167
|
+
}
|
|
168
|
+
if (scrollDirection === "vertical" || scrollDirection === "none") {
|
|
169
|
+
if (absMovedY > MIN_DRAG_THRESHOLD) {
|
|
170
|
+
if (isNearTopEdge || isNearBottomEdge) {
|
|
171
|
+
if (Math.abs(deltaY) > 0.1) {
|
|
172
|
+
var instantVelocityY = deltaY / deltaTime * 16;
|
|
173
|
+
velocityY = velocityY * (1 - VELOCITY_SMOOTHING) + instantVelocityY * VELOCITY_SMOOTHING;
|
|
174
|
+
}
|
|
175
|
+
if (!autoScrollAnimationId) {
|
|
176
|
+
autoScrollAnimationId = requestAnimationFrame(autoScroll);
|
|
177
|
+
}
|
|
178
|
+
} else {
|
|
179
|
+
velocityY = 0;
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
} else {
|
|
183
|
+
velocityY = 0;
|
|
184
|
+
}
|
|
185
|
+
lastX = e.clientX;
|
|
186
|
+
lastY = e.clientY;
|
|
187
|
+
lastMoveTime = currentTime;
|
|
188
|
+
e.preventDefault();
|
|
189
|
+
}
|
|
190
|
+
function onMouseUp() {
|
|
191
|
+
if (!isDragging) return;
|
|
192
|
+
isDragging = false;
|
|
193
|
+
stopAutoScroll();
|
|
194
|
+
containerEl.style.cursor = "";
|
|
195
|
+
}
|
|
196
|
+
containerEl.addEventListener("mousedown", onMouseDown);
|
|
197
|
+
window.addEventListener("mousemove", onMouseMove);
|
|
198
|
+
window.addEventListener("mouseup", onMouseUp);
|
|
199
|
+
return function () {
|
|
200
|
+
stopAutoScroll();
|
|
201
|
+
containerEl.removeEventListener("mousedown", onMouseDown);
|
|
202
|
+
window.removeEventListener("mousemove", onMouseMove);
|
|
203
|
+
window.removeEventListener("mouseup", onMouseUp);
|
|
204
|
+
};
|
|
205
|
+
}
|
|
65
206
|
function handleMobileScroll(containerEl, scrollHandler, getPixelScale) {
|
|
66
207
|
var isScrolling = false;
|
|
67
208
|
var gestureStartClientX = 0;
|
|
@@ -210,9 +351,13 @@ export var useSmoothScroll = function useSmoothScroll(scrollContainerRef) {
|
|
|
210
351
|
var unmountMobileScrollHandler = handleMobileScroll(scrollContainerEl, scrollHandler, function () {
|
|
211
352
|
return (window.devicePixelRatio || 1) * context.zoomRatio;
|
|
212
353
|
});
|
|
354
|
+
var unmountMouseDragHandler = handleMouseDragScroll(scrollContainerEl, scrollHandler, function () {
|
|
355
|
+
return (window.devicePixelRatio || 1) * context.zoomRatio;
|
|
356
|
+
});
|
|
213
357
|
return function () {
|
|
214
358
|
unmountScrollHandler();
|
|
215
359
|
unmountMobileScrollHandler();
|
|
360
|
+
unmountMouseDragHandler();
|
|
216
361
|
};
|
|
217
362
|
}
|
|
218
363
|
useEffect(function () {
|
|
@@ -69,6 +69,147 @@ 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 startX = 0;
|
|
75
|
+
var startY = 0;
|
|
76
|
+
var lastX = 0;
|
|
77
|
+
var lastY = 0;
|
|
78
|
+
var velocityX = 0;
|
|
79
|
+
var velocityY = 0;
|
|
80
|
+
var autoScrollAnimationId = 0;
|
|
81
|
+
var lastMoveTime = 0;
|
|
82
|
+
var scrollDirection = "none";
|
|
83
|
+
var VELOCITY_SMOOTHING = 0.3;
|
|
84
|
+
var MIN_DRAG_THRESHOLD = 5;
|
|
85
|
+
var ACCELERATION_FACTOR = 1.02;
|
|
86
|
+
var MAX_VELOCITY = 50;
|
|
87
|
+
var DIRECTION_LOCK_THRESHOLD = 1.5;
|
|
88
|
+
var EDGE_SCROLL_ZONE = 10;
|
|
89
|
+
function stopAutoScroll() {
|
|
90
|
+
if (autoScrollAnimationId) {
|
|
91
|
+
cancelAnimationFrame(autoScrollAnimationId);
|
|
92
|
+
autoScrollAnimationId = 0;
|
|
93
|
+
}
|
|
94
|
+
velocityX = 0;
|
|
95
|
+
velocityY = 0;
|
|
96
|
+
}
|
|
97
|
+
function autoScroll() {
|
|
98
|
+
if (!isDragging) {
|
|
99
|
+
stopAutoScroll();
|
|
100
|
+
return;
|
|
101
|
+
}
|
|
102
|
+
if (Math.abs(velocityX) > 0.1) {
|
|
103
|
+
velocityX *= ACCELERATION_FACTOR;
|
|
104
|
+
velocityX = Math.max(-MAX_VELOCITY, Math.min(MAX_VELOCITY, velocityX));
|
|
105
|
+
}
|
|
106
|
+
if (Math.abs(velocityY) > 0.1) {
|
|
107
|
+
velocityY *= ACCELERATION_FACTOR;
|
|
108
|
+
velocityY = Math.max(-MAX_VELOCITY, Math.min(MAX_VELOCITY, velocityY));
|
|
109
|
+
}
|
|
110
|
+
var scale = getPixelScale();
|
|
111
|
+
scrollHandler(velocityX * scale, velocityY * scale);
|
|
112
|
+
autoScrollAnimationId = requestAnimationFrame(autoScroll);
|
|
113
|
+
}
|
|
114
|
+
function onMouseDown(e) {
|
|
115
|
+
if (e.button !== 0) return;
|
|
116
|
+
var target = e.target;
|
|
117
|
+
if (target.tagName === "INPUT" || target.tagName === "BUTTON" || target.tagName === "SELECT" || target.tagName === "TEXTAREA" || target.closest("button") || target.closest("input")) {
|
|
118
|
+
return;
|
|
119
|
+
}
|
|
120
|
+
isDragging = true;
|
|
121
|
+
scrollDirection = "none";
|
|
122
|
+
startX = e.clientX;
|
|
123
|
+
startY = e.clientY;
|
|
124
|
+
lastX = e.clientX;
|
|
125
|
+
lastY = e.clientY;
|
|
126
|
+
lastMoveTime = performance.now();
|
|
127
|
+
velocityX = 0;
|
|
128
|
+
velocityY = 0;
|
|
129
|
+
containerEl.style.cursor = "grabbing";
|
|
130
|
+
e.preventDefault();
|
|
131
|
+
}
|
|
132
|
+
function onMouseMove(e) {
|
|
133
|
+
if (!isDragging) return;
|
|
134
|
+
var currentTime = performance.now();
|
|
135
|
+
var deltaTime = Math.max(1, currentTime - lastMoveTime);
|
|
136
|
+
var deltaX = e.clientX - lastX;
|
|
137
|
+
var deltaY = e.clientY - lastY;
|
|
138
|
+
var totalMovedX = e.clientX - startX;
|
|
139
|
+
var totalMovedY = e.clientY - startY;
|
|
140
|
+
var absMovedX = Math.abs(totalMovedX);
|
|
141
|
+
var absMovedY = Math.abs(totalMovedY);
|
|
142
|
+
var containerRect = containerEl.getBoundingClientRect();
|
|
143
|
+
var mouseX = e.clientX - containerRect.left;
|
|
144
|
+
var mouseY = e.clientY - containerRect.top;
|
|
145
|
+
var isNearLeftEdge = mouseX < EDGE_SCROLL_ZONE;
|
|
146
|
+
var isNearRightEdge = mouseX > containerRect.width - EDGE_SCROLL_ZONE;
|
|
147
|
+
var isNearTopEdge = mouseY < EDGE_SCROLL_ZONE;
|
|
148
|
+
var isNearBottomEdge = mouseY > containerRect.height - EDGE_SCROLL_ZONE;
|
|
149
|
+
if (scrollDirection === "none" && (absMovedX > MIN_DRAG_THRESHOLD || absMovedY > MIN_DRAG_THRESHOLD)) {
|
|
150
|
+
if (absMovedX > absMovedY * DIRECTION_LOCK_THRESHOLD) {
|
|
151
|
+
scrollDirection = "horizontal";
|
|
152
|
+
} else if (absMovedY > absMovedX * DIRECTION_LOCK_THRESHOLD) {
|
|
153
|
+
scrollDirection = "vertical";
|
|
154
|
+
} else {
|
|
155
|
+
scrollDirection = "none";
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
if (scrollDirection === "horizontal" || scrollDirection === "none") {
|
|
159
|
+
if (absMovedX > MIN_DRAG_THRESHOLD) {
|
|
160
|
+
if (isNearLeftEdge || isNearRightEdge) {
|
|
161
|
+
if (Math.abs(deltaX) > 0.1) {
|
|
162
|
+
var instantVelocityX = deltaX / deltaTime * 16;
|
|
163
|
+
velocityX = velocityX * (1 - VELOCITY_SMOOTHING) + instantVelocityX * VELOCITY_SMOOTHING;
|
|
164
|
+
}
|
|
165
|
+
if (!autoScrollAnimationId) {
|
|
166
|
+
autoScrollAnimationId = requestAnimationFrame(autoScroll);
|
|
167
|
+
}
|
|
168
|
+
} else {
|
|
169
|
+
velocityX = 0;
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
} else {
|
|
173
|
+
velocityX = 0;
|
|
174
|
+
}
|
|
175
|
+
if (scrollDirection === "vertical" || scrollDirection === "none") {
|
|
176
|
+
if (absMovedY > MIN_DRAG_THRESHOLD) {
|
|
177
|
+
if (isNearTopEdge || isNearBottomEdge) {
|
|
178
|
+
if (Math.abs(deltaY) > 0.1) {
|
|
179
|
+
var instantVelocityY = deltaY / deltaTime * 16;
|
|
180
|
+
velocityY = velocityY * (1 - VELOCITY_SMOOTHING) + instantVelocityY * VELOCITY_SMOOTHING;
|
|
181
|
+
}
|
|
182
|
+
if (!autoScrollAnimationId) {
|
|
183
|
+
autoScrollAnimationId = requestAnimationFrame(autoScroll);
|
|
184
|
+
}
|
|
185
|
+
} else {
|
|
186
|
+
velocityY = 0;
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
} else {
|
|
190
|
+
velocityY = 0;
|
|
191
|
+
}
|
|
192
|
+
lastX = e.clientX;
|
|
193
|
+
lastY = e.clientY;
|
|
194
|
+
lastMoveTime = currentTime;
|
|
195
|
+
e.preventDefault();
|
|
196
|
+
}
|
|
197
|
+
function onMouseUp() {
|
|
198
|
+
if (!isDragging) return;
|
|
199
|
+
isDragging = false;
|
|
200
|
+
stopAutoScroll();
|
|
201
|
+
containerEl.style.cursor = "";
|
|
202
|
+
}
|
|
203
|
+
containerEl.addEventListener("mousedown", onMouseDown);
|
|
204
|
+
window.addEventListener("mousemove", onMouseMove);
|
|
205
|
+
window.addEventListener("mouseup", onMouseUp);
|
|
206
|
+
return function () {
|
|
207
|
+
stopAutoScroll();
|
|
208
|
+
containerEl.removeEventListener("mousedown", onMouseDown);
|
|
209
|
+
window.removeEventListener("mousemove", onMouseMove);
|
|
210
|
+
window.removeEventListener("mouseup", onMouseUp);
|
|
211
|
+
};
|
|
212
|
+
}
|
|
72
213
|
function handleMobileScroll(containerEl, scrollHandler, getPixelScale) {
|
|
73
214
|
var isScrolling = false;
|
|
74
215
|
var gestureStartClientX = 0;
|
|
@@ -217,9 +358,13 @@ var useSmoothScroll = exports.useSmoothScroll = function useSmoothScroll(scrollC
|
|
|
217
358
|
var unmountMobileScrollHandler = handleMobileScroll(scrollContainerEl, scrollHandler, function () {
|
|
218
359
|
return (window.devicePixelRatio || 1) * context.zoomRatio;
|
|
219
360
|
});
|
|
361
|
+
var unmountMouseDragHandler = handleMouseDragScroll(scrollContainerEl, scrollHandler, function () {
|
|
362
|
+
return (window.devicePixelRatio || 1) * context.zoomRatio;
|
|
363
|
+
});
|
|
220
364
|
return function () {
|
|
221
365
|
unmountScrollHandler();
|
|
222
366
|
unmountMobileScrollHandler();
|
|
367
|
+
unmountMouseDragHandler();
|
|
223
368
|
};
|
|
224
369
|
}
|
|
225
370
|
(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.98",
|
|
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.98",
|
|
20
20
|
"@fileverse/ui": "5.0.0",
|
|
21
21
|
"@tippyjs/react": "^4.2.6",
|
|
22
22
|
"@types/regenerator-runtime": "^0.13.6",
|