fix: disable undo/redo in contextmenu when reach end of history(#27)

.npmrc

@@ -0,0 +1,2 @@
+auto-install-peers=true
+strict-peer-dependencies=false

package.json

@@ -36,7 +36,8 @@
     "lint-staged": "^13.2.1",
     "minimist": "^1.2.8",
     "npm-run-all": "^4.1.5",
-    "prettier": "2.8.7"
+    "prettier": "2.8.7",
+    "typescript": "^4.9.3"
   },
   "dependencies": {
     "react": "^18.2.0",

packages/components/package.json

@@ -50,7 +50,6 @@
     "eslint-plugin-storybook": "^0.6.11",
     "prop-types": "^15.8.1",
     "storybook": "^7.0.6",
-    "typescript": "^4.9.3",
     "vite": "^4.2.0"
   }
 }

packages/icons/package.json

@@ -25,7 +25,6 @@
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "@vitejs/plugin-react-swc": "^3.0.0",
-    "typescript": "^4.9.3",
     "vite": "^4.2.0",
     "@rollup/plugin-typescript": "^11.1.0",
     "tslib": "^2.5.0"

packages/suika/package.json

@@ -34,7 +34,6 @@
     "react-scripts": "5.0.1",
     "sass": "^1.57.1",
     "store2": "^2.14.2",
-    "typescript": "^4.4.2",
     "web-vitals": "^2.1.0"
   },
   "browserslist": {

packages/suika/src/components/ContextMenu/ContextMenu.tsx

@@ -6,6 +6,7 @@ import ContextMenuItem from './components/ContextMenuItem';
 import ContextMenuSep from './components/ContextMenuSep';
 import './ContextMenu.scss';
 import { FormattedMessage } from 'react-intl';
+import { IHistoryStatus } from '../../editor/commands/command_manager';
 
 const OFFSET_X = 2;
 const OFFSET_Y = -5;
@@ -14,19 +15,28 @@ export const ContextMenu: FC = () => {
   const editor = useContext(EditorContext);
   const [visible, setVisible] = useState(false);
   const [pos, setPos] = useState({ x: 0, y: 0 });
+  const [canRedo, setCanRedo] = useState(false);
+  const [canUndo, setCanUdo] = useState(false);
 
   useEffect(() => {
     if (editor) {
       // 监听 editor 的 contextmenu 事件
-      const handler = (pos: IPoint) => {
+      const handleContextmenu = (pos: IPoint) => {
         if (!visible) {
           setVisible(true);
           setPos(pos);
         }
       };
-      editor.hostEventManager.on('contextmenu', handler);
+      editor.hostEventManager.on('contextmenu', handleContextmenu);
+
+      const handleCommandChange = (status: IHistoryStatus) => {
+        setCanRedo(status.canRedo);
+        setCanUdo(status.canUndo);
+      };
+      editor.commandManager.on('change', handleCommandChange);
       return () => {
-        editor.hostEventManager.off('contextmenu', handler);
+        editor.hostEventManager.off('contextmenu', handleContextmenu);
+        editor.commandManager.off('change', handleCommandChange);
       };
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -39,6 +49,7 @@ export const ContextMenu: FC = () => {
     return (
       <>
         <ContextMenuItem
+          disabled={!canUndo}
           onClick={() => {
             setVisible(false);
             if (editor) {
@@ -49,6 +60,7 @@ export const ContextMenu: FC = () => {
           <FormattedMessage id="command.undo" />
         </ContextMenuItem>
         <ContextMenuItem
+          disabled={!canRedo}
           onClick={() => {
             setVisible(false);
             if (editor) {
@@ -144,7 +156,9 @@ export const ContextMenu: FC = () => {
         }}
       >
         {renderNoSelectContextMenu()}
-        {editor && !editor.selectedElements.isEmpty() && renderSelectContextMenu()}
+        {editor &&
+          !editor.selectedElements.isEmpty() &&
+          renderSelectContextMenu()}
       </div>
     </div>
   );

packages/suika/src/components/ContextMenu/components/ContextMenuItem.scss

@@ -8,5 +8,13 @@
       color: #fff;
       background-color: #0f8fff;
     }
+    &.suika-is-disable {
+      color: #ccc;
+      pointer-events: none;
+      &:hover {
+        color: #ccc;
+        background-color: transparent;
+      }
+    }
   }
-}
+}

packages/suika/src/components/ContextMenu/components/ContextMenuItem.tsx

@@ -1,14 +1,18 @@
 import { FC, PropsWithChildren } from 'react';
 import './ContextMenuItem.scss';
+import classNames from 'classnames';
 
 interface IProps extends PropsWithChildren {
+  disabled?: boolean;
   onClick(): void;
 }
 
-const ContextMenuItem: FC<IProps> = ({ children, onClick }) => {
+const ContextMenuItem: FC<IProps> = ({ children, disabled, onClick }) => {
   return (
     <div
-      className="suika-context-menu-item"
+      className={classNames('suika-context-menu-item', {
+        'suika-is-disable': disabled,
+      })}
       onClick={onClick}
     >
       {children}

packages/suika/src/editor/commands/command_manager.ts

@@ -1,10 +1,19 @@
+import EventEmitter from '../../utils/event_emitter';
 import { Editor } from '../editor';
 import { ICommand } from './type';
 
+export interface IHistoryStatus {
+  canRedo: boolean;
+  canUndo: boolean;
+}
+
 export class CommandManager {
   redoStack: ICommand[] = [];
   undoStack: ICommand[] = [];
   private isEnableRedoUndo = true;
+  private emitter = new EventEmitter<{
+    change(status: IHistoryStatus): void;
+  }>();
 
   constructor(private editor: Editor) {}
 
@@ -17,12 +26,13 @@ export class CommandManager {
       console.log(
         `%c Redo %c ${command.desc}`,
         'background: #f04; color: #ee0',
-        ''
+        '',
       );
       this.undoStack.push(command);
       command.redo();
 
       this.editor.sceneGraph.render();
+      this.emitStatusChange();
     }
   }
   undo() {
@@ -34,12 +44,13 @@ export class CommandManager {
       console.log(
         `%c Undo %c ${command.desc}`,
         'background: #40f; color: #eee',
-        ''
+        '',
       );
       this.redoStack.push(command);
       command.undo();
 
       this.editor.sceneGraph.render();
+      this.emitStatusChange();
     }
   }
   enableRedoUndo() {
@@ -52,9 +63,22 @@ export class CommandManager {
     console.log(
       `%c Exec %c ${command.desc}`,
       'background: #222; color: #bada55',
-      ''
+      '',
     );
     this.undoStack.push(command);
     this.redoStack = [];
+    this.emitStatusChange();
+  }
+  private emitStatusChange() {
+    this.emitter.emit('change', {
+      canRedo: this.redoStack.length > 0,
+      canUndo: this.undoStack.length > 0,
+    });
+  }
+  on(eventName: 'change', listener: (status: IHistoryStatus) => void) {
+    this.emitter.on(eventName, listener);
+  }
+  off(eventName: 'change', listener: (status: IHistoryStatus) => void) {
+    this.emitter.off(eventName, listener);
   }
 }