Merge pull request #557 from toeverything/feat-mouse-event

feat: enable shape mode

packages/app/src/components/edgeless-toolbar/index.tsx

@@ -24,6 +24,15 @@ const toolbarList1 = [
     icon: <SelectIcon />,
     toolTip: 'Select',
     disable: false,
+    callback: () => {
+      window.dispatchEvent(
+        new CustomEvent('affine.switch-mouse-mode', {
+          detail: {
+            type: 'default',
+          },
+        })
+      );
+    },
   },
   {
     flavor: 'text',
@@ -34,8 +43,19 @@ const toolbarList1 = [
   {
     flavor: 'shape',
     icon: <ShapeIcon />,
-    toolTip: 'Shape (coming soon)',
+    toolTip: 'Shape',
-    disable: true,
+    disable: false,
+    callback: () => {
+      window.dispatchEvent(
+        new CustomEvent('affine.switch-mouse-mode', {
+          detail: {
+            type: 'shape',
+            color: 'black',
+            shape: 'rectangle',
+          },
+        })
+      );
+    },
   },
   {
     flavor: 'sticky',
@@ -122,20 +142,23 @@ export const EdgelessToolbar = () => {
     >
       <StyledEdgelessToolbar>
         <StyledToolbarWrapper>
-          {toolbarList1.map(({ icon, toolTip, flavor, disable }, index) => {
+          {toolbarList1.map(
+            ({ icon, toolTip, flavor, disable, callback }, index) => {
               return (
                 <Tooltip key={index} content={toolTip} placement="right-start">
                   <StyledToolbarItem
                     disable={disable}
                     onClick={() => {
-                    console.log('flavor', flavor);
+                      console.log('click toolbar button:', flavor);
+                      callback?.();
                     }}
                   >
                     {icon}
                   </StyledToolbarItem>
                 </Tooltip>
               );
-          })}
+            }
+          )}
         </StyledToolbarWrapper>
         <UndoRedo />
       </StyledEdgelessToolbar>