feat(editor): supporting time-traveling

Author: elliothux

packages/editor/src/components/Header/OperationBar/Items/SaveAndHistory.tsx

@@ -51,14 +51,16 @@ function ISaveAndHistory() {
       <OperationItem title={t('copy')} icon={FiCopy} action={unImplemented} />
       <OperationItem
         title={
-          debugPort ? t('{{type}} not allowed with DebugMode', { type: 'save as template' }) : t('save as template')
+          debugPort ? t('{{type}} not allowed with debug-mode', { type: 'save as template' }) : t('save as template')
         }
         icon={FiFilePlus}
         action={unImplemented}
         disabled={!!debugPort}
       />
       <OperationItem
-        title={debugPort ? t('{{type}} not allowed with DebugMode', { type: 'history manager' }) : t('history manager')}
+        title={
+          debugPort ? t('{{type}} not allowed with debug-mode', { type: 'history manager' }) : t('history manager')
+        }
         icon={FiGitMerge}
         action={unImplemented}
         disabled={!!debugPort}

packages/editor/src/components/Header/OperationBar/Items/UndoAndClear.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { observer } from 'mobx-react';
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
+import { message } from 'antd';
 import { FiCornerUpLeft, FiCornerUpRight, FiX } from 'react-icons/fi';
 import { Trans, useTranslation } from 'react-i18next';
 import { unImplemented } from 'utils';
@@ -11,7 +12,37 @@ import { hotKeyPrefix } from './utils';
 
 function IUndoAndClear() {
   const { t } = useTranslation();
-  const { canUndo, canRedo, undo, redo } = timeTraveler;
+  const { canUndo, canRedo, undo: un, redo: re } = timeTraveler;
+
+  const undo = useCallback(() => {
+    if (!timeTraveler.canUndo) {
+      return;
+    }
+    message.destroy();
+    message.open({
+      type: 'info',
+      content: 'undo',
+      icon: <FiCornerUpLeft />,
+      duration: 1,
+      className: 'undo-message',
+    });
+    un();
+  }, []);
+
+  const redo = useCallback(() => {
+    if (!timeTraveler.canRedo) {
+      return;
+    }
+    message.destroy();
+    message.open({
+      type: 'info',
+      content: 'redo',
+      icon: <FiCornerUpRight />,
+      duration: 1,
+      className: 'redo-message',
+    });
+    re();
+  }, []);
 
   useEffect(() => {
     hotkeyEvents.only(HotKeyEventTypes.UNDO, undo);

packages/editor/src/components/Header/OperationBar/index.scss

@@ -51,6 +51,8 @@
 }
 
 .vize-editor-operation-item-tooltip {
+  max-width: 400px !important;
+
   .ant-tooltip-inner {
     & > p {
       margin: 0;
@@ -109,3 +111,19 @@
     }
   }
 }
+
+.undo-message,
+.redo-message {
+  .ant-message-notice-content {
+    background-color: rgba(0, 0, 0, 0.75);
+    color: white;
+  }
+
+  .ant-message-info > svg {
+    width: 16px;
+    height: auto;
+    margin-right: 4px;
+    position: relative;
+    top: 2px;
+  }
+}

packages/editor/src/i18n/resources/zh.ts

@@ -83,7 +83,7 @@ export const zh = {
     save: '保存',
     'save as template': '存为模板',
     'history manager': '历史管理',
-    '{{type}} not allowed with DebugMode': 'Debug 模式下不支持 $t({{type}})',
+    '{{type}} not allowed with debug-mode': 'Debug 模式下不支持 $t({{type}})',
     saving: '保存中',
     saved: '保存成功',
     'failed to save': '保存失败',

packages/editor/src/libs/history/configure.ts

@@ -2,6 +2,7 @@ import { TimeTravelerConfig } from './types';
 
 export const config: TimeTravelerConfig = {
   maxStacks: 20,
+  debounceTime: 2000,
 };
 
 export function configure(newConfig: Partial<TimeTravelerConfig>) {

packages/editor/src/libs/history/decorators.ts

@@ -33,7 +33,7 @@ export const withSnapshot = (payload?: Record<string, any>) => (
     if (!inUpdating) {
       updating = true;
     }
-    const result = initializer.apply(this).apply(this, args);
+    const result = initializer.call(target).apply(target, args);
     if (!inUpdating) {
       setTimeout(async () => {
         if (result instanceof Promise) {
@@ -45,6 +45,7 @@ export const withSnapshot = (payload?: Record<string, any>) => (
     }
     return result;
   };
+  return descriptor as any;
 };
 
 interface ActionWithSnapshot {
@@ -60,12 +61,12 @@ export const actionWithSnapshot: ActionWithSnapshot = (
   if (!propertyKey) {
     const payload = payloadOrTarget as Record<string, any>;
     return (target: object, propertyKey: string, descriptor?: PropertyDescriptor) => {
-      withSnapshot(payload)(target, propertyKey, descriptor);
-      return action(target, propertyKey, descriptor);
+      withSnapshot.call(target, payload)(target, propertyKey, descriptor);
+      return action.call(target, target, propertyKey, descriptor);
     };
   }
 
   const target = payloadOrTarget as object;
-  withSnapshot(undefined)(target, propertyKey, descriptor);
-  return action(target, propertyKey, descriptor) as any;
+  withSnapshot.call(target)(target, propertyKey, descriptor);
+  return action.call(target, target, propertyKey, descriptor) as any;
 };

packages/editor/src/libs/history/record.ts

@@ -1,5 +1,5 @@
 import { Snapshots } from './types';
-import { runInAction } from 'mobx';
+import { observable, runInAction } from 'mobx';
 
 export const recordedStores: Snapshots = {};
 

packages/editor/src/libs/history/timeTraveling.ts

@@ -1,15 +1,18 @@
-import { action, computed, observable } from 'mobx';
+import { action, computed, observable, IObservableValue } from 'mobx';
 import { RestoreCallback, Snapshots } from './types';
 import { recordedStores, restoreSnapshot } from './record';
 import { dehydrate } from './hydrate';
+import { config } from './configure';
 
 export class TimeTraveler {
   @observable
-  private stacks: Snapshots[] = [];
+  private stacks: IObservableValue<Snapshots>[] = [];
 
   @observable
   private cursor = 0;
 
+  private lastUpdate = 0;
+
   public getSnapshots = (): Snapshots => {
     return Object.entries(recordedStores).reduce<Snapshots>((accu, [k, v]) => {
       accu[k] = dehydrate(v);
@@ -23,19 +26,32 @@ export class TimeTraveler {
     if (payload) {
       item.payload = payload;
     }
-    this.stacks = [item];
+    this.stacks = [observable.box(item, { deep: false })];
     this.cursor = 0;
   };
 
   @action
   public updateSnapshots = (payload?: Record<string, any>, snapshots?: Snapshots) => {
-    const { stacks } = this;
+    const { stacks, cursor } = this;
     const item = snapshots || this.getSnapshots();
     if (payload) {
       item.payload = payload;
     }
-    stacks.push(item);
+
+    if (cursor < stacks.length - 1) {
+      stacks.splice(cursor + 1, stacks.length - cursor);
+    }
+
+    const boxedItem = observable.box(item, { deep: false });
+    const debounce = Date.now() - this.lastUpdate < config.debounceTime;
+    if (debounce) {
+      stacks[stacks.length - 1] = boxedItem;
+    } else {
+      stacks.push(boxedItem);
+    }
+
     this.cursor = stacks.length - 1;
+    this.lastUpdate = Date.now();
   };
 
   @computed
@@ -56,8 +72,8 @@ export class TimeTraveler {
     if (!this.canUndo) {
       return;
     }
-    const currentSnapshots = stacks[cursor];
-    const snapshots = stacks[cursor - 1];
+    const currentSnapshots = stacks[cursor].get();
+    const snapshots = stacks[cursor - 1].get();
     this.cursor -= 1;
     return restoreSnapshot(snapshots, () => {
       this.restoreCallbacks.forEach(callback => callback('undo', snapshots, currentSnapshots));
@@ -70,8 +86,8 @@ export class TimeTraveler {
     if (!this.canRedo) {
       return;
     }
-    const currentSnapshots = stacks[cursor];
-    const snapshots = stacks[cursor + 1];
+    const currentSnapshots = stacks[cursor].get();
+    const snapshots = stacks[cursor + 1].get();
     this.cursor += 1;
     return restoreSnapshot(snapshots, () => {
       this.restoreCallbacks.forEach(callback => callback('redo', snapshots, currentSnapshots));
@@ -92,3 +108,5 @@ export class TimeTraveler {
 }
 
 export const timeTraveler = new TimeTraveler();
+
+(window as any).timeTraveler = timeTraveler;

packages/editor/src/libs/history/types.ts

@@ -5,6 +5,7 @@ export interface Snapshots {
 
 export interface TimeTravelerConfig {
   maxStacks: number;
+  debounceTime: number;
 }
 
 export type RestoreCallback = (

packages/editor/src/libs/indexMap/componentIndexMap.ts

@@ -98,7 +98,9 @@ export function generateComponentsIndex(componentInstances: ComponentInstance[])
 }
 
 export function regenerateAllPagesComponentsIndex() {
-  pagesStore.pages.forEach(page => regeneratePageComponentsIndex(page.key, page.componentInstances));
+  return pagesStore.pages.forEach(({ key, componentInstances }) => {
+    return regeneratePageComponentsIndex(key, componentInstances);
+  });
 }
 
 export function regeneratePageComponentsIndex(pageKey: number, pageComponentInstances: ComponentInstance[]) {