diff --git a/src/components/GlobalTouchMenu.tsx b/src/components/GlobalTouchMenu.tsx
index 48e5128..b5a5a71 100644
--- a/src/components/GlobalTouchMenu.tsx
+++ b/src/components/GlobalTouchMenu.tsx
@@ -6,118 +6,139 @@ import { lastEnteredGroupIdAtom } from '../atoms/global';
import CloseIcon from '@mui/icons-material/Close';
const CustomStyledMenu = styled(Menu)(({ theme }) => ({
- '& .MuiPaper-root': {
- backgroundColor: '#f9f9f9',
- borderRadius: '12px',
- padding: theme.spacing(1),
- boxShadow: '0 5px 15px rgba(0, 0, 0, 0.2)',
- },
- '& .MuiMenuItem-root': {
- fontSize: '14px',
- color: '#444',
- transition: '0.3s background-color',
- '&:hover': {
- backgroundColor: '#f0f0f0',
- },
+ '& .MuiPaper-root': {
+ backgroundColor: '#f9f9f9',
+ borderRadius: '12px',
+ padding: theme.spacing(1),
+ boxShadow: '0 5px 15px rgba(0, 0, 0, 0.2)',
+ },
+ '& .MuiMenuItem-root': {
+ fontSize: '14px',
+ color: '#444',
+ transition: '0.3s background-color',
+ '&:hover': {
+ backgroundColor: '#f0f0f0',
},
+ },
}));
export const GlobalTouchMenu = () => {
- const [menuOpen, setMenuOpen] = useState(false);
- const tapCount = useRef(0);
- const lastTapTime = useRef(0);
- const [menuPosition, setMenuPosition] = useState(null);
- const [lastEnteredGroupId] = useRecoilState(lastEnteredGroupIdAtom)
+ const [menuOpen, setMenuOpen] = useState(false);
+ const [menuPosition, setMenuPosition] = useState(null);
+ const [lastEnteredGroupId] = useRecoilState(lastEnteredGroupIdAtom);
+ // Refs for tap tracking and scroll detection
+ const tapCount = useRef(0);
+ const lastTapTime = useRef(0);
+ const touchStartY = useRef(0);
+ const touchMoved = useRef(false);
- useEffect(() => {
- const handleTouchStart = (event) => {
- const currentTime = new Date().getTime();
- const tapGap = currentTime - lastTapTime.current;
- const { clientX, clientY } = event.touches[0];
+ useEffect(() => {
+ const handleTouchStart = (event) => {
+ // Reset scroll flag and store the starting Y position
+ touchMoved.current = false;
+ touchStartY.current = event.touches[0].clientY;
- if (tapGap < 400) {
- tapCount.current += 1;
- } else {
- tapCount.current = 1; // Reset if too much time has passed
- }
+ const currentTime = new Date().getTime();
+ const tapGap = currentTime - lastTapTime.current;
+ const { clientX, clientY } = event.touches[0];
- lastTapTime.current = currentTime;
+ if (tapGap < 400) {
+ tapCount.current += 1;
+ } else {
+ tapCount.current = 1; // Reset if too much time has passed
+ }
+ lastTapTime.current = currentTime;
- if (tapCount.current === 3) {
- setMenuPosition({
- top: clientY,
- left: clientX,
- });
- setMenuOpen(true);
- tapCount.current = 0; // Reset after activation
- }
- };
-
- document.addEventListener('touchstart', handleTouchStart);
-
- return () => {
- document.removeEventListener('touchstart', handleTouchStart);
- };
- }, []);
-
- const handleClose = () => {
- setMenuOpen(false);
+ if (tapCount.current === 3 && !touchMoved.current) {
+ setMenuPosition({ top: clientY, left: clientX });
+ setMenuOpen(true);
+ tapCount.current = 0; // Reset after activation
+ }
};
- return (
-
-
-
-
-
-
-
-
-
- );
-};
+ const handleTouchMove = (event) => {
+ const currentY = event.touches[0].clientY;
+ // If the vertical movement exceeds 10px, consider it a scroll
+ if (Math.abs(currentY - touchStartY.current) > 10) {
+ touchMoved.current = true;
+ }
+ };
+ const handleTouchEnd = () => {
+ // You can optionally reset tapCount here if needed
+ };
+
+ document.addEventListener('touchstart', handleTouchStart);
+ document.addEventListener('touchmove', handleTouchMove);
+ document.addEventListener('touchend', handleTouchEnd);
+
+ return () => {
+ document.removeEventListener('touchstart', handleTouchStart);
+ document.removeEventListener('touchmove', handleTouchMove);
+ document.removeEventListener('touchend', handleTouchEnd);
+ };
+ }, []);
+
+ const handleClose = () => {
+ setMenuOpen(false);
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+ );
+};