fix(creation-toolbar): use pointerUp set basic pointer cause onChange…

… do not fire on mobile bind pointermove/pointerup to viewportContainerRef to implement dnd on mobile #20
plait-board · Nov 8, 2024 · 54b036b · 54b036b
1 parent 463c92a
commit 54b036b
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 85 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,12 +10,12 @@
   "private": true,
   "dependencies": {
     "@floating-ui/react": "^0.26.24",
-    "@plait/common": "^0.69.1",
-    "@plait/core": "^0.69.1",
-    "@plait/draw": "^0.69.1",
-    "@plait/layouts": "^0.69.1",
-    "@plait/mind": "^0.69.1",
-    "@plait/text-plugins": "^0.69.1",
+    "@plait/common": "^0.69.2",
+    "@plait/core": "^0.69.2",
+    "@plait/draw": "^0.69.2",
+    "@plait/layouts": "^0.69.2",
+    "@plait/mind": "^0.69.2",
+    "@plait/text-plugins": "^0.69.2",
     "ahooks": "^3.8.0",
     "browser-fs-access": "^0.35.0",
     "classnames": "^2.5.1",

diff --git a/packages/drawnix/src/components/toolbar/creation-toolbar.tsx b/packages/drawnix/src/components/toolbar/creation-toolbar.tsx
@@ -93,19 +93,16 @@ export const isShapePointer = (board: PlaitBoard) => {
   return Object.keys(BasicShapes).includes(board.pointer);
 };
 
-export const CreationToolbar: React.FC<CreationToolbarProps> = ({ setPointer }) => {
+export const CreationToolbar: React.FC<CreationToolbarProps> = ({
+  setPointer,
+}) => {
   const board = useBoard();
   const container = PlaitBoard.getBoardContainer(board);
 
   const [arrowOpen, setArrowOpen] = useState(false);
 
   const [shapeOpen, setShapeOpen] = useState(false);
 
-  const onChange = (pointer: DrawnixPointerType) => {
-    BoardTransforms.updatePointerType(board, pointer);
-    setPointer(pointer);
-  };
-
   const onPointerDown = (pointer: DrawnixPointerType) => {
     setCreationMode(board, BoardCreationMode.dnd);
     BoardTransforms.updatePointerType(board, pointer);
@@ -221,11 +218,6 @@ export const CreationToolbar: React.FC<CreationToolbarProps> = ({ setPointer })
               checked={isChecked(button)}
               title={`${button.title}`}
               aria-label={`${button.title}`}
-              onChange={() => {
-                if (button.pointer && isBasicPointer(button.pointer)) {
-                  onChange(button.pointer);
-                }
-              }}
               onPointerDown={() => {
                 if (button.pointer && !isBasicPointer(button.pointer)) {
                   onPointerDown(button.pointer);
@@ -234,6 +226,9 @@ export const CreationToolbar: React.FC<CreationToolbarProps> = ({ setPointer })
               onPointerUp={() => {
                 if (button.pointer && !isBasicPointer(button.pointer)) {
                   onPointerUp();
+                } else if (button.pointer && isBasicPointer(button.pointer)) {
+                  BoardTransforms.updatePointerType(board, button.pointer);
+                  setPointer(button.pointer);
                 }
               }}
             />

diff --git a/packages/react-board/src/board.tsx b/packages/react-board/src/board.tsx
@@ -92,7 +92,7 @@ export const Board: React.FC<PlaitBoardProps> = ({
     };
   }, []);
 
-  useBoardPluginEvent(board, hostRef);
+  useBoardPluginEvent(board, viewportContainerRef, hostRef);
   useBoardEvent(board, viewportContainerRef);
 
   return (

diff --git a/packages/react-board/src/hooks/use-plugin-event.tsx b/packages/react-board/src/hooks/use-plugin-event.tsx
@@ -8,22 +8,15 @@ import {
   hasInputOrTextareaTarget,
   setFragment,
   toHostPoint,
-  toViewBoxPoint
+  toViewBoxPoint,
 } from '@plait/core';
 import { useEventListener } from 'ahooks';
 
 const useBoardPluginEvent = (
   board: PlaitBoard,
+  viewportContainerRef: React.RefObject<HTMLDivElement>,
   hostRef: React.RefObject<SVGSVGElement>
 ) => {
-  useEventListener(
-    'mousedown',
-    (event) => {
-      board.mousedown(event);
-    },
-    { target: hostRef }
-  );
-
   useEventListener(
     'pointerdown',
     (event) => {
@@ -32,31 +25,13 @@ const useBoardPluginEvent = (
     { target: hostRef }
   );
 
-  useEventListener(
-    'mousemove',
-    (event) => {
-      BOARD_TO_MOVING_POINT_IN_BOARD.set(board, [event.x, event.y]);
-      board.mousemove(event);
-    },
-    { target: hostRef }
-  );
-
   useEventListener(
     'pointermove',
     (event) => {
       BOARD_TO_MOVING_POINT_IN_BOARD.set(board, [event.x, event.y]);
       board.pointerMove(event);
     },
-    { target: hostRef }
-  );
-
-  useEventListener(
-    'mouseleave',
-    (event) => {
-      BOARD_TO_MOVING_POINT_IN_BOARD.delete(board);
-      board.mouseleave(event);
-    },
-    { target: hostRef }
+    { target: viewportContainerRef }
   );
 
   useEventListener(
@@ -65,23 +40,15 @@ const useBoardPluginEvent = (
       BOARD_TO_MOVING_POINT_IN_BOARD.delete(board);
       board.pointerLeave(event);
     },
-    { target: hostRef }
-  );
-
-  useEventListener(
-    'mouseup',
-    (event) => {
-      board.mouseup(event);
-    },
-    { target: hostRef }
+    { target: viewportContainerRef }
   );
 
   useEventListener(
     'pointerup',
     (event) => {
       board.pointerUp(event);
     },
-    { target: hostRef }
+    { target: viewportContainerRef }
   );
 
   useEventListener(
@@ -94,11 +61,6 @@ const useBoardPluginEvent = (
     { target: hostRef }
   );
 
-  useEventListener('mousemove', (event) => {
-    BOARD_TO_MOVING_POINT.set(board, [event.x, event.y]);
-    board.globalMousemove(event);
-  });
-
   useEventListener('pointermove', (event) => {
     BOARD_TO_MOVING_POINT.set(board, [event.x, event.y]);
     board.globalPointerMove(event);