fix: Correct cursor position calculation for touch events (#20748)

* improve cursor position on mobile

* force ci re-run

* force ci re-run

* replace addEventListner with removeEventListener on unmount

bigbluebutton-html5/imports/ui/components/whiteboard/cursors/component.jsx

@@ -28,6 +28,13 @@ const TOOL_CURSORS = {
   grabbing: 'grabbing',
   moving: 'move',
 };
+
+// Offset native tldraw eraser animation container
+const setOverlayPosition = () => {
+  const overlay = document.getElementsByClassName('tl-overlay')[0];
+  if (overlay) overlay.style.left = '0px';
+};
+
 const Cursors = (props) => {
   const cursorWrapper = React.useRef();
   const [active, setActive] = React.useState(false);
@@ -100,43 +107,32 @@ const Cursors = (props) => {
     const banners = document.querySelectorAll('[data-test="notificationBannerBar"]');
     let yOffset = 0;
     let xOffset = 0;
+
     const calcPresOffset = () => {
-      yOffset
+      const presContainerHeight = parseFloat(presentationContainer?.style?.height);
-        += (parseFloat(presentationContainer?.style?.height)
+      const presHeight = parseFloat(presentation?.style?.height);
-          - (parseFloat(presentation?.style?.height)
+      const presToolbarHeight = currentUser.presenter ? PRES_TOOLBAR_HEIGHT : 0;
-            + (currentUser.presenter ? PRES_TOOLBAR_HEIGHT : 0))
+
-        ) / 2;
+      yOffset += (presContainerHeight - (presHeight + presToolbarHeight)) / 2;
-      xOffset
+
-        += (parseFloat(presentationContainer?.style?.width)
+      const presContainerWidth = parseFloat(presentationContainer?.style?.width);
-          - parseFloat(presentation?.style?.width)
+      const presWidth = parseFloat(presentation?.style?.width);
-        ) / 2;
+
+      xOffset += (presContainerWidth - presWidth) / 2;
     };
-    // If the presentation container is the full screen element we don't
+
-    // need any offsets
+    // If the presentation container is the full screen element we don't need any offsets
     const { webkitFullscreenElement, fullscreenElement } = document;
     const fsEl = webkitFullscreenElement || fullscreenElement;
+
     if (fsEl?.getAttribute('data-test') === 'presentationContainer') {
       calcPresOffset();
-      return setPos({ x: x - xOffset, y: y - yOffset });
+    } else {
-    }
+      const calculateOffsets = () => {
         if (nav) yOffset += parseFloat(nav?.style?.height);
         if (panel) xOffset += parseFloat(panel?.style?.width);
         if (subPanel) xOffset += parseFloat(subPanel?.style?.width);
 
-    // offset native tldraw eraser animation container
-    const overlay = document.getElementsByClassName('tl-overlay')[0];
-    if (overlay) overlay.style.left = '0px';
-
-    if (type === 'touchmove') {
-      calcPresOffset();
-      if (!active) {
-        setActive(true);
-      }
-      const newX = event?.changedTouches[0]?.clientX - xOffset;
-      const newY = event?.changedTouches[0]?.clientY - yOffset;
-      return setPos({ x: newX, y: newY });
-    }
-
         if (document?.documentElement?.dir === 'rtl') {
           xOffset = 0;
           if (presentationContainer && presentation) {
@@ -214,8 +210,20 @@ const Cursors = (props) => {
             yOffset += parseFloat(window.getComputedStyle(el).height);
           });
         }
+      };
 
-    return setPos({ x: event.x - xOffset, y: event.y - yOffset });
+      calculateOffsets();
+    }
+
+    const posX = type === 'touchmove' ? event.changedTouches[0].clientX : x;
+    const posY = type === 'touchmove' ? event.changedTouches[0].clientY : y;
+
+    if (type === 'touchmove' && !active) {
+      setActive(true);
+    }
+
+    setOverlayPosition();
+    return setPos({ x: posX - xOffset, y: posY - yOffset });
   };
 
   React.useEffect(() => {
@@ -231,7 +239,7 @@ const Cursors = (props) => {
 
     return () => {
       currentCursor?.removeEventListener('mouseenter', start);
-      currentCursor?.addEventListener('touchstart', start);
+      currentCursor?.removeEventListener('touchstart', start);
       currentCursor?.removeEventListener('mouseleave', end);
       currentCursor?.removeEventListener('mousedown', handleGrabbing);
       currentCursor?.removeEventListener('mouseup', handleReleaseGrab);