fix: lock Beam viewer background gestures

2026-06-05 13:11:32 +03:00
parent 867f7bc558
commit ff30eeb8fd
2 changed files with 59 additions and 0 deletions
@@ -138,6 +138,52 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
    isDeleteIssueModalOpen || isArchiveIssueModalOpen || isDuplicateIssueModalOpen || isEditIssueModalOpen;
  const shouldUseBeamPeekShell = !embedIssue && peekMode === "side-peek" && !!beamPeekViewer;

+  useEffect(() => {
+    if (typeof window === "undefined" || !shouldUseBeamPeekShell) return;
+
+    const root = document.documentElement;
+    root.classList.add("nodedc-beam-viewer-interaction-lock");
+
+    const isViewerEvent = (event: Event) => {
+      const shell = issuePeekOverviewRef.current;
+      if (!shell) return false;
+
+      const viewerCard = shell.querySelector(".nodedc-beam-peek-viewer-card");
+      const target = event.target instanceof Node ? event.target : null;
+      const path = typeof event.composedPath === "function" ? event.composedPath() : [];
+
+      return !!viewerCard && ((target && viewerCard.contains(target)) || path.includes(viewerCard));
+    };
+
+    const stopViewerGestureLeak = (event: Event) => {
+      if (!isViewerEvent(event)) return;
+
+      event.stopPropagation();
+
+      if ((event.type === "wheel" || event.type === "touchmove") && event.cancelable) {
+        event.preventDefault();
+      }
+    };
+
+    const passiveOptions: AddEventListenerOptions = { capture: true, passive: true };
+    const activeOptions: AddEventListenerOptions = { capture: true, passive: false };
+
+    window.addEventListener("wheel", stopViewerGestureLeak, activeOptions);
+    window.addEventListener("touchmove", stopViewerGestureLeak, activeOptions);
+    window.addEventListener("pointerdown", stopViewerGestureLeak, passiveOptions);
+    window.addEventListener("pointermove", stopViewerGestureLeak, passiveOptions);
+    window.addEventListener("pointerup", stopViewerGestureLeak, passiveOptions);
+
+    return () => {
+      root.classList.remove("nodedc-beam-viewer-interaction-lock");
+      window.removeEventListener("wheel", stopViewerGestureLeak, activeOptions);
+      window.removeEventListener("touchmove", stopViewerGestureLeak, activeOptions);
+      window.removeEventListener("pointerdown", stopViewerGestureLeak, passiveOptions);
+      window.removeEventListener("pointermove", stopViewerGestureLeak, passiveOptions);
+      window.removeEventListener("pointerup", stopViewerGestureLeak, passiveOptions);
+    };
+  }, [shouldUseBeamPeekShell]);
+
  const getMaxSidePeekWidth = useCallback(() => {
    if (typeof window === "undefined") return 720;
    const minWidth = 640;