Merge branch '136-mobile-context-menu' into 'main'

Enable to open context menu with long touch press

Closes #136

See merge request ExplorViz/code/frontend!259

Author: malte-hansen

src/components/context-menu.tsx

@@ -7,6 +7,7 @@ import { Position2D } from '../hooks/interaction-modifier';
 import { removeAllHighlighting } from 'explorviz-frontend/src/utils/application-rendering/highlighting';
 import { useAnnotationHandlerStore } from 'explorviz-frontend/src/stores/annotation-handler';
 import { pingByModelId } from 'explorviz-frontend/src/view-objects/3d/application/animated-ping-r3f';
+import useLongPress from '../hooks/useLongPress';
 export type ContextMenuItem = {
   title: string;
   action: () => void;
@@ -27,6 +28,14 @@ export default function ContextMenu({ children, enterVR }: ContextMenuProps) {
 
   const hide = () => setVisible(false);
 
+  const handleLongPress = (pos: Position2D) => {
+    setPosition(pos);
+    reveal();
+  };
+
+  const { onTouchStart, onTouchMove, onTouchEnd } =
+    useLongPress(handleLongPress);
+
   const resetView = async () => {
     useCameraControlsStore.getState().resetCamera();
   };
@@ -128,11 +137,14 @@ export default function ContextMenu({ children, enterVR }: ContextMenuProps) {
       onMouseUp={onMouseUp}
       onMouseDown={onMouseDown}
       onContextMenu={onContextMenu}
+      onTouchStart={onTouchStart}
+      onTouchMove={onTouchMove}
+      onTouchEnd={onTouchEnd}
       style={{ width: '100%' }}
     >
       {visible && position && (
         <ul
-          className="bg-white shadow border rounded-md w-40"
+          className="bg-white shadow border rounded-md w-40 select-none"
           style={{
             position: 'absolute',
             top: position.y,
@@ -164,7 +176,7 @@ interface ContextMenuItemProps {
 function ContextMenuItem({ title, onSelect }: ContextMenuItemProps) {
   return (
     <li
-      className="context-menu-item"
+      className="context-menu-item select-none"
       style={{ cursor: 'pointer' }}
       onClick={onSelect}
     >

src/hooks/useLongPress.ts

@@ -0,0 +1,93 @@
+import { useEffect, useRef } from 'react';
+import { Position2D } from './interaction-modifier';
+
+interface UseLongPressOptions {
+  delay?: number;
+  movementThreshold?: number;
+}
+
+const useLongPress = (
+  onLongPress: (position: Position2D) => void,
+  options: UseLongPressOptions = {}
+) => {
+  const { delay: LONG_PRESS_DELAY = 500, movementThreshold = 35 } = options;
+
+  const touchMoved = useRef<boolean>(false);
+  const longPressTimer = useRef<NodeJS.Timeout | null>(null);
+  const touchStartPosition = useRef<Position2D | null>(null);
+  const longPressTriggered = useRef<boolean>(false);
+
+  const onTouchStart = (event: React.TouchEvent) => {
+    touchMoved.current = false;
+    longPressTriggered.current = false;
+    const touch = event.touches[0];
+    touchStartPosition.current = { x: touch.pageX, y: touch.pageY };
+
+    // Clear any existing timer
+    if (longPressTimer.current) {
+      clearTimeout(longPressTimer.current);
+    }
+
+    longPressTimer.current = setTimeout(() => {
+      if (!touchMoved.current && touchStartPosition.current) {
+        longPressTriggered.current = true;
+        onLongPress({
+          x: touchStartPosition.current.x,
+          y: touchStartPosition.current.y,
+        });
+      }
+    }, LONG_PRESS_DELAY);
+  };
+
+  const onTouchMove = (event: React.TouchEvent) => {
+    if (touchStartPosition.current && event.touches[0]) {
+      const touch = event.touches[0];
+      const deltaX = Math.abs(touch.pageX - touchStartPosition.current.x);
+      const deltaY = Math.abs(touch.pageY - touchStartPosition.current.y);
+
+      // If moved more than threshold, cancel long press
+      if (deltaX > movementThreshold || deltaY > movementThreshold) {
+        touchMoved.current = true;
+        longPressTriggered.current = false;
+        if (longPressTimer.current) {
+          clearTimeout(longPressTimer.current);
+          longPressTimer.current = null;
+        }
+      }
+    }
+  };
+
+  const onTouchEnd = (event: React.TouchEvent) => {
+    // Cancel long press if touch ends before timer completes
+    if (longPressTimer.current) {
+      clearTimeout(longPressTimer.current);
+      longPressTimer.current = null;
+    }
+
+    // Prevent default context menu if long press was successfully triggered
+    if (longPressTriggered.current) {
+      event.preventDefault();
+    }
+
+    touchStartPosition.current = null;
+    longPressTriggered.current = false;
+  };
+
+  useEffect(() => {
+    return () => {
+      // Cleanup timer on unmount
+      if (longPressTimer.current) {
+        clearTimeout(longPressTimer.current);
+        longPressTimer.current = null;
+      }
+    };
+  }, []);
+
+  return {
+    onTouchStart,
+    onTouchMove,
+    onTouchEnd,
+  };
+};
+
+export default useLongPress;

src/scss/_context_menu.scss

@@ -6,3 +6,10 @@
     background-color: lightgrey;
   }
 }
+
+.select-none {
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}