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(
-            return (
+            ({ icon, toolTip, flavor, disable, callback }, index) => {
-              <Tooltip key={index} content={toolTip} placement="right-start">
+              return (
-                <StyledToolbarItem
+                <Tooltip key={index} content={toolTip} placement="right-start">
-                  disable={disable}
+                  <StyledToolbarItem
-                  onClick={() => {
+                    disable={disable}
-                    console.log('flavor', flavor);
+                    onClick={() => {
-                  }}
+                      console.log('click toolbar button:', flavor);
-                >
+                      callback?.();
-                  {icon}
+                    }}
-                </StyledToolbarItem>
+                  >
-              </Tooltip>
+                    {icon}
-            );
+                  </StyledToolbarItem>
-          })}
+                </Tooltip>
+              );
+            }
+          )}
         </StyledToolbarWrapper>
         <UndoRedo />
       </StyledEdgelessToolbar>