B: Tentative fix for longpress on iOS

rsconcept/frontend/src/features/oss/pages/oss-page/editor-oss-graph/context-menu/use-context-menu.ts

@@ -19,18 +19,13 @@ export function useContextMenu() {
   const setHoverOperation = useOperationTooltipStore(state => state.setHoverItem);
   const { addSelectedNodes } = useStoreApi().getState();
 
-  function handleContextMenu(event: React.MouseEvent<Element>, node: OssNode) {
+  function openContextMenu(node: OssNode, clientX: number, clientY: number) {
-    event.preventDefault();
-    event.stopPropagation();
-
     addSelectedNodes([node.id]);
-
     setMenuProps({
       item: node.type === 'block' ? node.data.block ?? null : node.data.operation ?? null,
-      cursorX: event.clientX,
+      cursorX: clientX,
-      cursorY: event.clientY
+      cursorY: clientY
     });
-
     setIsOpen(true);
     setHoverOperation(null);
   }
@@ -42,7 +37,7 @@ export function useContextMenu() {
   return {
     isOpen,
     menuProps,
-    handleContextMenu,
+    openContextMenu,
     hideContextMenu
   };
 }

rsconcept/frontend/src/features/oss/pages/oss-page/editor-oss-graph/graph/node-core.tsx

@@ -31,6 +31,10 @@ export function NodeCore({ node }: NodeCoreProps) {
   const hasFile = !!node.data.operation.result;
   const longLabel = node.data.label.length > LONG_LABEL_CHARS;
 
+  function handleTouchStart(event: React.TouchEvent) {
+    console.log('handleTouchStart', event);
+  }
+
   return (
     <div
       className={cn(
@@ -38,6 +42,7 @@ export function NodeCore({ node }: NodeCoreProps) {
         'relative flex items-center justify-center p-[2px]',
         isChild && 'border-accent-orange'
       )}
+      onTouchStart={handleTouchStart}
     >
       <div className='absolute z-pop top-0 right-0 flex flex-col gap-[4px] p-[2px]'>
         <Indicator

rsconcept/frontend/src/features/oss/pages/oss-page/editor-oss-graph/oss-flow.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import clsx from 'clsx';
 
 import { DiagramFlow, useReactFlow, useStoreApi } from '@/components/flow/diagram-flow';
@@ -8,6 +8,7 @@ import { useMainHeight } from '@/stores/app-layout';
 import { useDialogsStore } from '@/stores/dialogs';
 import { PARAMETER } from '@/utils/constants';
 import { promptText } from '@/utils/labels';
+import { isIOS } from '@/utils/utils';
 
 import { useDeleteBlock } from '../../../backend/use-delete-block';
 import { useMutatingOss } from '../../../backend/use-mutating-oss';
@@ -64,9 +65,12 @@ export function OssFlow() {
   const showDeleteOperation = useDialogsStore(state => state.showDeleteOperation);
   const showEditBlock = useDialogsStore(state => state.showEditBlock);
 
-  const { isOpen: isContextMenuOpen, menuProps, handleContextMenu, hideContextMenu } = useContextMenu();
+  const { isOpen: isContextMenuOpen, menuProps, openContextMenu, hideContextMenu } = useContextMenu();
   const { handleDragStart, handleDrag, handleDragStop } = useDragging({ hideContextMenu });
 
+  const longPressTimeout = useRef<NodeJS.Timeout | null>(null);
+  const longPressTarget = useRef<EventTarget | null>(null);
+
   function handleSavePositions() {
     void updateLayout({ itemID: schema.id, data: getLayout() });
   }
@@ -183,6 +187,55 @@ export function OssFlow() {
     setMouseCoords(targetPosition);
   }
 
+  function handleNodeContextMenu(event: React.MouseEvent<Element>, node: OssNode) {
+    event.preventDefault();
+    event.stopPropagation();
+    openContextMenu(node, event.clientX, event.clientY);
+  }
+
+  function handleTouchStart(event: React.TouchEvent) {
+    if (!isIOS() || event.touches.length !== 1) {
+      return;
+    }
+
+    // Long-press support for iOS/iPadOS
+    const touch = event.touches[0];
+    longPressTarget.current = touch.target;
+    longPressTimeout.current = setTimeout(() => {
+      let targetID = null;
+      let element = touch.target as HTMLElement | null;
+      while (element) {
+        if (element?.getAttribute?.('data-id')) {
+          targetID = element.getAttribute('data-id');
+          break;
+        }
+        element = element.parentElement;
+      }
+      if (targetID) {
+        const targetNode = nodes.find(node => node.id === targetID);
+        if (targetNode) {
+          openContextMenu(targetNode, touch.clientX, touch.clientY);
+        }
+      }
+    }, PARAMETER.ossContextMenuDuration);
+  }
+
+  function handleTouchEnd() {
+    if (!isIOS()) return;
+    if (longPressTimeout.current) {
+      clearTimeout(longPressTimeout.current);
+      longPressTimeout.current = null;
+    }
+  }
+
+  function handleTouchMove() {
+    if (!isIOS()) return;
+    if (longPressTimeout.current) {
+      clearTimeout(longPressTimeout.current);
+      longPressTimeout.current = null;
+    }
+  }
+
   return (
     <div tabIndex={-1} className='relative' onMouseMove={showCoordinates ? handleMouseMove : undefined}>
       {showCoordinates ? <CoordinateDisplay mouseCoords={mouseCoords} className='absolute top-1 right-2' /> : null}
@@ -209,11 +262,14 @@ export function OssFlow() {
         showGrid={showGrid}
         onClick={hideContextMenu}
         onNodeDoubleClick={handleNodeDoubleClick}
-        onNodeContextMenu={handleContextMenu}
+        onNodeContextMenu={handleNodeContextMenu}
         onContextMenu={hideContextMenu}
         onNodeDragStart={handleDragStart}
         onNodeDrag={handleDrag}
         onNodeDragStop={handleDragStop}
+        onTouchStart={handleTouchStart}
+        onTouchEnd={handleTouchEnd}
+        onTouchMove={handleTouchMove}
       />
     </div>
   );

rsconcept/frontend/src/utils/constants.ts

@@ -11,6 +11,7 @@ export const PARAMETER = {
   notificationDelay: 300, // milliseconds delay for notifications
   zoomDuration: 500, // milliseconds animation duration
   navigationPopupDelay: 300, // milliseconds delay for navigation popup
+  ossContextMenuDuration: 500, // milliseconds - duration of long-press to trigger context menu on iOS/iPadOS
 
   moveDuration: 500, // milliseconds - duration of move animation
 

rsconcept/frontend/src/utils/utils.ts

@@ -192,3 +192,16 @@ export function removeTags(target?: string): string {
 export function prepareTooltip(text: string, hotkey?: string) {
   return hotkey ? `<kbd>[${hotkey}]</kbd><br/>${text}` : text;
 }
+
+/**
+ * Utility to detect iOS/iPadOS.
+ */
+export function isIOS() {
+  if (typeof navigator === 'undefined') {
+    return false;
+  }
+  return (
+    /iPad|iPhone|iPod/.test(navigator.userAgent) ||
+    (navigator.userAgent.includes('Macintosh') && 'ontouchend' in document)
+  );
+}