feat(board): disabled use-select for foreign-object-

add touchmove listener for board
plait-board · Jun 16, 2024 · a505547 · a505547
1 parent c1eac0c
commit a505547
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 0 deletions.
diff --git a/apps/react-app/src/styles/core/styles.scss b/apps/react-app/src/styles/core/styles.scss
@@ -91,5 +91,9 @@
         cursor: crosshair;
     }
 
+    foreignObject[class^='foreign-object-'] {
+        user-select: none;
+    }
+
     @include mixins.board-background-color();
 }
diff --git a/packages/react-board/src/hooks/use-board-event.ts b/packages/react-board/src/hooks/use-board-event.ts
@@ -5,6 +5,7 @@ import {
   initializeViewBox,
   initializeViewportContainer,
   isFromViewportChange,
+  isPreventTouchMove,
   setIsFromViewportChange,
   updateViewportByScrolling,
   updateViewportOffset
@@ -29,6 +30,16 @@ const useBoardEvent = (
     { target: PlaitBoard.getViewportContainer(board) }
   );
 
+  useEventListener(
+    'touchmove',
+    (event) => {
+      if (isPreventTouchMove(board)) {
+        event.preventDefault();
+      }
+    },
+    { target: PlaitBoard.getViewportContainer(board), passive: false }
+  );
+
   useEventListener(
     'wheel',
     (event) => {