@fileverse-dev/fortune-react 1.2.96-maitra-feb6-patch-1 → 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.
- package/es/components/NotationBoxes/index.js +2 -2
- package/es/components/Sheet/use-smooth-scroll.js +84 -0
- package/es/components/Toolbar/index.js +2 -2
- package/lib/components/NotationBoxes/index.js +2 -2
- package/lib/components/Sheet/use-smooth-scroll.js +84 -0
- package/lib/components/Toolbar/index.js +2 -2
- package/package.json +2 -2
|
@@ -74,7 +74,7 @@ var NotationBoxes = function NotationBoxes() {
|
|
|
74
74
|
position: "absolute",
|
|
75
75
|
left: size.left,
|
|
76
76
|
top: size.top,
|
|
77
|
-
zIndex:
|
|
77
|
+
zIndex: 100,
|
|
78
78
|
pointerEvents: "none"
|
|
79
79
|
}
|
|
80
80
|
}), /*#__PURE__*/React.createElement("div", {
|
|
@@ -83,7 +83,7 @@ var NotationBoxes = function NotationBoxes() {
|
|
|
83
83
|
position: "absolute",
|
|
84
84
|
left: left,
|
|
85
85
|
top: top,
|
|
86
|
-
zIndex: isEditing ?
|
|
86
|
+
zIndex: isEditing ? 200 : 100,
|
|
87
87
|
boxShadow: "0 1px 1px #0000002e,0 4px 8px #0000001a"
|
|
88
88
|
},
|
|
89
89
|
onMouseDown: function onMouseDown(e) {
|
|
@@ -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 () {
|
|
@@ -475,7 +475,7 @@ var Toolbar = function Toolbar(_a) {
|
|
|
475
475
|
var _j = useState(false),
|
|
476
476
|
showDuneModal = _j[0],
|
|
477
477
|
setShowDuneModal = _j[1];
|
|
478
|
-
var _k = useState(window.innerWidth >=
|
|
478
|
+
var _k = useState(window.innerWidth >= 1280),
|
|
479
479
|
isDesktop = _k[0],
|
|
480
480
|
setIsDesktop = _k[1];
|
|
481
481
|
var _l = useDialog(),
|
|
@@ -543,7 +543,7 @@ var Toolbar = function Toolbar(_a) {
|
|
|
543
543
|
}, []);
|
|
544
544
|
useEffect(function () {
|
|
545
545
|
var handleResize = function handleResize() {
|
|
546
|
-
setIsDesktop(window.innerWidth >=
|
|
546
|
+
setIsDesktop(window.innerWidth >= 1280);
|
|
547
547
|
};
|
|
548
548
|
window.addEventListener("resize", handleResize);
|
|
549
549
|
return function () {
|
|
@@ -83,7 +83,7 @@ var NotationBoxes = function NotationBoxes() {
|
|
|
83
83
|
position: "absolute",
|
|
84
84
|
left: size.left,
|
|
85
85
|
top: size.top,
|
|
86
|
-
zIndex:
|
|
86
|
+
zIndex: 100,
|
|
87
87
|
pointerEvents: "none"
|
|
88
88
|
}
|
|
89
89
|
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -92,7 +92,7 @@ var NotationBoxes = function NotationBoxes() {
|
|
|
92
92
|
position: "absolute",
|
|
93
93
|
left: left,
|
|
94
94
|
top: top,
|
|
95
|
-
zIndex: isEditing ?
|
|
95
|
+
zIndex: isEditing ? 200 : 100,
|
|
96
96
|
boxShadow: "0 1px 1px #0000002e,0 4px 8px #0000001a"
|
|
97
97
|
},
|
|
98
98
|
onMouseDown: function onMouseDown(e) {
|
|
@@ -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 () {
|
|
@@ -484,7 +484,7 @@ var Toolbar = function Toolbar(_a) {
|
|
|
484
484
|
var _j = (0, _react.useState)(false),
|
|
485
485
|
showDuneModal = _j[0],
|
|
486
486
|
setShowDuneModal = _j[1];
|
|
487
|
-
var _k = (0, _react.useState)(window.innerWidth >=
|
|
487
|
+
var _k = (0, _react.useState)(window.innerWidth >= 1280),
|
|
488
488
|
isDesktop = _k[0],
|
|
489
489
|
setIsDesktop = _k[1];
|
|
490
490
|
var _l = (0, _useDialog.useDialog)(),
|
|
@@ -552,7 +552,7 @@ var Toolbar = function Toolbar(_a) {
|
|
|
552
552
|
}, []);
|
|
553
553
|
(0, _react.useEffect)(function () {
|
|
554
554
|
var handleResize = function handleResize() {
|
|
555
|
-
setIsDesktop(window.innerWidth >=
|
|
555
|
+
setIsDesktop(window.innerWidth >= 1280);
|
|
556
556
|
};
|
|
557
557
|
window.addEventListener("resize", handleResize);
|
|
558
558
|
return function () {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fileverse-dev/fortune-react",
|
|
3
|
-
"version": "1.2.96-
|
|
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.96-
|
|
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",
|