feat: improve arrow hand shape picker

packages/drawnix/src/components/arrow-popup.tsx

@@ -8,7 +8,7 @@ import { BoardTransforms, PlaitBoard } from '@plait/core';
 import * as Popover from '@radix-ui/react-popover';
 import React from 'react';
 import { BoardCreationMode, setCreationMode } from '@plait/common';
-import { ArrowLineShape } from '@plait/draw';
+import { ArrowLineShape, DrawPointerType } from '@plait/draw';
 
 export interface ArrowProps {
   icon: React.ReactNode;
@@ -35,18 +35,15 @@ const ARROWS: ArrowProps[] = [
 ];
 
 export type ArrowPopupProps = {
-  onPointerUp: () => void;
-}
+  onPointerUp: (pointer: DrawPointerType) => void;
+};
 
-export const ArrowPopupContent: React.FC<ArrowPopupProps> = ({ onPointerUp }) => {
+export const ArrowPopupContent: React.FC<ArrowPopupProps> = ({
+  onPointerUp,
+}) => {
   const board = useBoard();
   const container = PlaitBoard.getBoardContainer(board);
 
-  const onPointerDown = (pointer: ArrowLineShape) => {
-    setCreationMode(board, BoardCreationMode.drawing);
-    BoardTransforms.updatePointerType(board, pointer);
-  };
-
   return (
     <Popover.Portal container={container}>
       <Popover.Content sideOffset={12}>
@@ -64,10 +61,11 @@ export const ArrowPopupContent: React.FC<ArrowPopupProps> = ({ onPointerUp }) =>
                   title={arrow.title}
                   aria-label={arrow.title}
                   onPointerDown={() => {
-                    onPointerDown(arrow.pointer);
+                    setCreationMode(board, BoardCreationMode.drawing);
+                    BoardTransforms.updatePointerType(board, arrow.pointer);
                   }}
                   onPointerUp={() => {
-                    onPointerUp();
+                    onPointerUp(arrow.pointer);
                   }}
                 />
               );

packages/drawnix/src/components/draw-toolbar.tsx

@@ -15,7 +15,7 @@ import { BoardTransforms, PlaitBoard, PlaitPointerType } from '@plait/core';
 import { MindPointerType } from '@plait/mind';
 import { DrawnixPointerType } from '../drawnix';
 import { BoardCreationMode, setCreationMode } from '@plait/common';
-import { ArrowLineShape, BasicShapes } from '@plait/draw';
+import { ArrowLineShape, BasicShapes, DrawPointerType } from '@plait/draw';
 import * as Popover from '@radix-ui/react-popover';
 import { useSetState } from 'ahooks';
 import { ShapePopupContent } from './shape-popup';
@@ -68,45 +68,24 @@ export const BUTTONS: AppToolButtonProps[] = [
     popupKey: PopupKey.arrow,
     pointer: ArrowLineShape.straight,
   },
-  // {
-  //   icon: ShapeIcon,
-  //   title: 'Shape',
-  //   popupKey: PopupKey.shape,
-  // },
+  {
+    icon: ShapeIcon,
+    title: 'Shape',
+    popupKey: PopupKey.shape,
+    pointer: BasicShapes.rectangle,
+  },
 ];
 
-export const renderPopupContent = (
-  key: PopupKey,
-  setOpen: (open: boolean) => void
-) => {
-  switch (key) {
-    case PopupKey.shape:
-      return <ShapePopupContent></ShapePopupContent>;
-    case PopupKey.arrow:
-      return (
-        <ArrowPopupContent
-          onPointerUp={() => {
-            setOpen(false);
-          }}
-        ></ArrowPopupContent>
-      );
-    default:
-      break;
-  }
-};
-
 export type DrawToolbarProps = {
   setPointer: (pointer: DrawnixPointerType) => void;
 };
 
 export const DrawToolbar: React.FC<DrawToolbarProps> = ({ setPointer }) => {
   const board = useBoard();
 
-  const [open, setOpen] = useState(false);
+  const [arrowOpen, setArrowOpen] = useState(false);
 
-  const [state, setState] = useSetState<{
-    popupKey: PopupKey | undefined;
-  }>({ popupKey: undefined });
+  const [shapeOpen, setShapeOpen] = useState(false);
 
   const onChange = (pointer: DrawnixPointerType) => {
     BoardTransforms.updatePointerType(board, pointer);
@@ -125,63 +104,93 @@ export const DrawToolbar: React.FC<DrawToolbarProps> = ({ setPointer }) => {
 
   const isChecked = (button: AppToolButtonProps) => {
     return (
-      PlaitBoard.isPointer(board, button.pointer) &&
-      state.popupKey === undefined
+      PlaitBoard.isPointer(board, button.pointer) && !arrowOpen && !shapeOpen
     );
   };
 
   return (
     <Island padding={1} className={classNames('draw-toolbar')}>
       <Stack.Row gap={1}>
         {BUTTONS.map((button, index) => {
-          if (button.popupKey) {
+          if (button.popupKey === PopupKey.shape) {
+            return (
+              <Popover.Root
+                key={index}
+                open={shapeOpen}
+                onOpenChange={(open) => {
+                  setShapeOpen(open);
+                }}
+              >
+                <Popover.Trigger asChild>
+                  <ToolButton
+                    className={classNames('Shape', { fillable: false })}
+                    type="icon"
+                    visible={true}
+                    selected={shapeOpen || isChecked(button)}
+                    icon={button.icon}
+                    title={`Shape`}
+                    aria-label={`Shape`}
+                    onPointerDown={() => {
+                      BoardTransforms.updatePointerType(
+                        board,
+                        BasicShapes.rectangle
+                      );
+                      setPointer(BasicShapes.rectangle);
+                      setCreationMode(board, BoardCreationMode.drawing);
+                    }}
+                  />
+                </Popover.Trigger>
+                <ShapePopupContent
+                  onPointerUp={(pointer: DrawPointerType) => {
+                    setShapeOpen(false);
+                    setPointer(pointer);
+                  }}
+                ></ShapePopupContent>
+              </Popover.Root>
+            );
+          }
+
+          if (button.popupKey === PopupKey.arrow) {
             return (
               <Popover.Root
                 key={index}
-                open={open}
+                open={arrowOpen}
                 onOpenChange={(open) => {
-                  setOpen(open);
-                  if (open) {
-                    setState({ popupKey: button.popupKey });
-                  } else {
-                    setState({ popupKey: undefined });
-                  }
+                  setArrowOpen(open);
                 }}
               >
                 <Popover.Trigger asChild>
                   <ToolButton
                     className={classNames('Shape', { fillable: false })}
                     type="icon"
                     visible={true}
-                    selected={state.popupKey === button.popupKey}
+                    selected={arrowOpen || isChecked(button)}
                     icon={button.icon}
                     title={`Shape`}
                     aria-label={`Shape`}
                     onPointerDown={() => {
-                      if (button.popupKey === PopupKey.arrow) {
-                        BoardTransforms.updatePointerType(
-                          board,
-                          ArrowLineShape.straight
-                        );
-                        setPointer(ArrowLineShape.straight);
-                        setCreationMode(board, BoardCreationMode.drawing);
-                      } else {
-                        BoardTransforms.updatePointerType(
-                          board,
-                          BasicShapes.rectangle
-                        );
-                        setPointer(BasicShapes.rectangle);
-                        setCreationMode(board, BoardCreationMode.drawing);
-                      }
+                      BoardTransforms.updatePointerType(
+                        board,
+                        ArrowLineShape.straight
+                      );
+                      setPointer(ArrowLineShape.straight);
+                      setCreationMode(board, BoardCreationMode.drawing);
                     }}
                   />
                 </Popover.Trigger>
-                {renderPopupContent(button.popupKey, setOpen)}
+                {
+                  <ArrowPopupContent
+                    onPointerUp={(pointer: DrawPointerType) => {
+                      setArrowOpen(false);
+                      setPointer(pointer);
+                    }}
+                  ></ArrowPopupContent>
+                }
               </Popover.Root>
             );
           }
 
-          const buttonComp = (
+          return (
             <ToolButton
               key={index}
               className={classNames('Shape', { fillable: false })}
@@ -207,7 +216,6 @@ export const DrawToolbar: React.FC<DrawToolbarProps> = ({ setPointer }) => {
               }}
             />
           );
-          return buttonComp;
         })}
       </Stack.Row>
     </Island>

packages/drawnix/src/components/shape-popup.tsx

@@ -67,19 +67,15 @@ const SHAPES: ShapeProps[] = [
 
 const ROW_SHAPES = splitRows(SHAPES, 5);
 
-export const ShapePopupContent: React.FC = () => {
+export type ShapePopupProps = {
+  onPointerUp: (pointer: DrawPointerType) => void;
+};
+
+export const ShapePopupContent: React.FC<ShapePopupProps> = ({
+  onPointerUp,
+}) => {
   const board = useBoard();
   const container = PlaitBoard.getBoardContainer(board);
-
-  const onPointerDown = (pointer: DrawnixPointerType) => {
-    setCreationMode(board, BoardCreationMode.dnd);
-    BoardTransforms.updatePointerType(board, pointer);
-  };
-
-  const onPointerUp = () => {
-    setCreationMode(board, BoardCreationMode.drawing);
-  };
-
   return (
     <Popover.Portal container={container}>
       <Popover.Content sideOffset={12}>
@@ -100,10 +96,15 @@ export const ShapePopupContent: React.FC = () => {
                         title={shape.title}
                         aria-label={shape.title}
                         onPointerDown={() => {
-                          onPointerDown(shape.pointer);
+                          setCreationMode(board, BoardCreationMode.dnd);
+                          BoardTransforms.updatePointerType(
+                            board,
+                            shape.pointer
+                          );
                         }}
                         onPointerUp={() => {
-                          onPointerUp();
+                          setCreationMode(board, BoardCreationMode.drawing);
+                          onPointerUp(shape.pointer);
                         }}
                       />
                     );