feat: add function of undo/redo

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

@@ -1,3 +1,4 @@
+import { useState, useEffect } from 'react';
 import {
   StyledEdgelessToolbar,
   StyledToolbarWrapper,
@@ -70,8 +71,50 @@ const toolbarList2 = [
     disable: false,
   },
 ];
+
+const UndoRedo = () => {
+  const [canUndo, setCanUndo] = useState(false);
+  const [canRedo, setCanRedo] = useState(false);
+  const { editor } = useEditor();
+  useEffect(() => {
+    if (!editor) return;
+    const { store } = editor;
+
+    store.signals.historyUpdated.on(() => {
+      setCanUndo(store.canUndo);
+      setCanRedo(store.canRedo);
+    });
+  }, [editor]);
+
+  return (
+    <StyledToolbarWrapper>
+      <Tooltip content="undo" placement="right-start">
+        <StyledToolbarItem
+          disable={!canUndo}
+          onClick={() => {
+            editor?.store?.undo();
+          }}
+        >
+          <UndoIcon />
+        </StyledToolbarItem>
+      </Tooltip>
+      <Tooltip content="redo" placement="right-start">
+        <StyledToolbarItem
+          disable={!canRedo}
+          onClick={() => {
+            editor?.store?.redo();
+          }}
+        >
+          <RedoIcon />
+        </StyledToolbarItem>
+      </Tooltip>
+    </StyledToolbarWrapper>
+  );
+};
+
 export const EdgelessToolbar = () => {
-  const { mode, editor } = useEditor();
+  const { mode } = useEditor();
+
   return (
     <Slide
       direction="right"
@@ -96,29 +139,7 @@ export const EdgelessToolbar = () => {
             );
           })}
         </StyledToolbarWrapper>
-        <StyledToolbarWrapper>
-          {toolbarList2.map(({ icon, toolTip, flavor, disable }, index) => {
-            return (
-              <Tooltip key={index} content={toolTip} placement="right-start">
-                <StyledToolbarItem
-                  disable={disable}
-                  onClick={() => {
-                    switch (flavor) {
-                      case 'undo':
-                        editor?.store?.undo();
-                        break;
-                      case 'redo':
-                        editor?.store?.redo();
-                        break;
-                    }
-                  }}
-                >
-                  {icon}
-                </StyledToolbarItem>
-              </Tooltip>
-            );
-          })}
-        </StyledToolbarWrapper>
+        <UndoRedo />
       </StyledEdgelessToolbar>
     </Slide>
   );

packages/app/src/components/edgeless-toolbar/style.ts

@@ -20,22 +20,22 @@ export const StyledToolbarWrapper = styled.div(({ theme }) => ({
   marginBottom: '12px',
 }));
 
-export const StyledToolbarItem = styled.div<{ disable: boolean }>(
-  ({ theme, disable }) => ({
+export const StyledToolbarItem = styled.div<{
+  disable?: boolean;
+}>(({ theme, disable = false }) => ({
+  width: '36px',
+  height: '36px',
+  ...displayFlex('center', 'center'),
+  color: disable ? '#C0C0C0' : theme.colors.iconColor,
+  cursor: 'pointer',
+  svg: {
     width: '36px',
     height: '36px',
-    ...displayFlex('center', 'center'),
-    color: disable ? '#C0C0C0' : theme.colors.iconColor,
-    cursor: 'pointer',
-    svg: {
-      width: '36px',
-      height: '36px',
-    },
-    ':hover': disable
-      ? {}
-      : {
-          color: theme.colors.primaryColor,
-          background: theme.colors.hoverBackground,
-        },
-  })
-);
+  },
+  ':hover': disable
+    ? {}
+    : {
+        color: theme.colors.primaryColor,
+        background: theme.colors.hoverBackground,
+      },
+}));