ContextMenu on canvas on TouchScreen

[alfonsito92]

I've created an application based on liteGraph that is totally functional.

I'm trying to add support for touch screens. I've captured properly all the touch interactions, but I'm not able to show the context menu, the same one that appears on the right click of the mouse. I've tried several formulas but none of them are resulting trying to show the litegraphmenu. Zoom is working fine in this case. Any help/hint is appreciated

` LiteGraph.clearRegisteredTypes();
LGraphCanvas.prototype.showSearchBox = function () {
return; // Prevent the search box from opening
};

if (nodes.length === 0 || !canvasRef.current) return;

// Store the current canvas reference safely
const canvasElement = canvasRef.current; `

const handleTouchStart = (event) => {
   if (event.touches.length === 1) {
     // Store touch start time for long press detection
     touchStartTime = Date.now();
   } else if (event.touches.length === 2) {
     // Start pinch-to-zoom
     const [touch1, touch2] = event.touches;
     initialDistance = Math.hypot(
       touch2.clientX - touch1.clientX,
       touch2.clientY - touch1.clientY
     );
     initialScale = canvas.ds.scale;
   }
   event.preventDefault(); // Prevent default touch behavior (e.g., scrolling)
 };



 const handleTouchEnd = (event) => {
   if (event.touches.length === 0) {
     const touchDuration = Date.now() - touchStartTime;
     const touch = event.changedTouches[0];

     if (touchDuration >= LONG_PRESS_DURATION) {
       const touch = event.changedTouches[0];
       const rightClickEvent = new MouseEvent("contextmenu", {
         bubbles: true,
         cancelable: true,
         view: window,
         clientX: touch.clientX,
         clientY: touch.clientY,
     });
     canvasElement.dispatchEvent(rightClickEvent);
     } else {
       const mouseDownEvent = new MouseEvent("mousedown", {
         bubbles: true,
         cancelable: true,
         view: window,
         clientX: touch.clientX,
         clientY: touch.clientY,
       });
       const mouseUpEvent = new MouseEvent("mouseup", {
         bubbles: true,
         cancelable: true,
         clientX: touch.clientX,
         clientY: touch.clientY,
       });

       canvasElement.dispatchEvent(mouseDownEvent);
       setTimeout(() => {
         canvasElement.dispatchEvent(mouseUpEvent);
       }, 50); // Small delay to ensure proper handling
     }
   }
 };

[atlasan]

Opening the context menu is one of the few things done for touch devices:

https://github.com/jagenjo/litegraph.js/blob/master/editor/editor_mobile.html

LiteGraph.pointerevents_method = "pointer";