feat(editor): supporting undo & redo

Author: elliothux

package.json

@@ -46,6 +46,7 @@
     "json-schema-defaults": "^0.4.0",
     "lodash.template": "^4.5.0",
     "mobx": "^5.15.4",
+    "mobx-time-traveler": "^0.1.0",
     "mobx-react": "^6.1.8",
     "promise-timeout": "^1.3.0",
     "qrcode.react": "^1.0.1",

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

@@ -1,12 +1,22 @@
 import * as React from 'react';
+import { observer } from 'mobx-react';
+import { useEffect } from 'react';
 import { FiCornerUpLeft, FiCornerUpRight, FiX } from 'react-icons/fi';
 import { Trans, useTranslation } from 'react-i18next';
 import { unImplemented } from 'utils';
+import { hotkeyEvents, HotKeyEventTypes } from 'libs';
+import { timeTraveler } from 'libs/history';
 import { OperationItem } from './OperationItem';
 import { hotKeyPrefix } from './utils';
 
-export function UndoAndClear() {
+function IUndoAndClear() {
   const { t } = useTranslation();
+  const { canUndo, canRedo, undo, redo } = timeTraveler;
+
+  useEffect(() => {
+    hotkeyEvents.only(HotKeyEventTypes.UNDO, undo);
+    hotkeyEvents.only(HotKeyEventTypes.REDO, redo);
+  }, []);
 
   return (
     <>
@@ -20,7 +30,8 @@ export function UndoAndClear() {
           </>
         }
         icon={FiCornerUpLeft}
-        action={unImplemented}
+        action={undo}
+        disabled={!canUndo}
       />
       <OperationItem
         title={
@@ -32,10 +43,13 @@ export function UndoAndClear() {
           </>
         }
         icon={FiCornerUpRight}
-        action={unImplemented}
+        action={redo}
+        disabled={!canRedo}
       />
       <OperationItem title={t('clear')} icon={FiX} action={unImplemented} />
       <span className="operation_black" />
     </>
   );
 }
+
+export const UndoAndClear = observer(IUndoAndClear);

packages/editor/src/libs/dsl/restore/index.ts

@@ -67,10 +67,11 @@ function restoreStateFromDSL(dsl: string) {
   if (sharedComponentInstances) {
     restoreSharedComponentInstances(sharedComponentInstances);
   }
+
+  regenerateAllEventDeps();
 }
 
 function restoreGlobal({ data, style, events, meta }: ReturnType<typeof parseDSL>) {
-  restoreEventDep(DepsFromType.Global, { events });
   return globalStore.setState(store => {
     store.globalData = data;
     store.globalStyle = style;
@@ -84,7 +85,6 @@ function restorePageInstances(pages: PageInstance[]) {
     const { key, componentInstances, pluginInstances } = page;
     page.componentInstances = restoreComponentInstances(key, componentInstances);
     page.pluginInstances = restorePluginInstances(key, pluginInstances!);
-    restoreEventDep(DepsFromType.Page, page);
   });
   return pagesStore.setState(store => (store.pages = pages));
 }
@@ -93,15 +93,13 @@ function restoreComponentInstances(pageKey: number, iComponentInstances: Compone
   const componentInstances = iComponentInstances.filter(filterComponent);
   const indexMap = generateComponentsIndex(componentInstances);
   addPageComponentInstanceIndexMap(pageKey, indexMap);
-  componentInstances.forEach(R.unary(R.partial(restoreEventDep, [DepsFromType.Component])));
   return componentInstances;
 }
 
 function restorePluginInstances(pageKey: number, iPluginInstances: PluginInstance[]) {
   const pluginInstances = iPluginInstances.filter(filterPlugin);
   const indexMap = generatePluginsIndex(pluginInstances);
   addPagePluginInstanceIndexMap(pageKey, indexMap);
-  pluginInstances.forEach(R.unary(R.partial(restoreEventDep, [DepsFromType.Plugin])));
   return pluginInstances;
 }
 
@@ -111,10 +109,44 @@ function restoreSharedComponentInstances(iComponentInstances: ComponentInstance[
 
   const indexMap = generateComponentsIndex(componentInstances);
   setSharedComponentIndexMap(indexMap);
-  componentInstances.forEach(R.unary(R.partial(restoreEventDep, [DepsFromType.Component])));
   return componentInstances;
 }
 
+function restoreEditInfo({ maxKeys, layoutMode, pageMode }: EditInfoDSL) {
+  editStore.setState(editStore => {
+    editStore.layoutMode = layoutMode;
+    editStore.pageMode = pageMode;
+  });
+
+  if (maxKeys) {
+    setMaxKey(InstanceKeyType.Page, maxKeys[InstanceKeyType.Page]);
+    setMaxKey(InstanceKeyType.Component, maxKeys[InstanceKeyType.Component]);
+    setMaxKey(InstanceKeyType.HotArea, maxKeys[InstanceKeyType.HotArea]);
+    setMaxKey(InstanceKeyType.Plugin, maxKeys[InstanceKeyType.Plugin]);
+    setMaxKey(InstanceKeyType.Action, maxKeys[InstanceKeyType.Action]);
+  }
+}
+
+interface ExtraInfo {
+  owner: UserRecord;
+}
+
+function restoreExtraInfo({ owner }: ExtraInfo) {
+  return editStore.setState(store => {
+    store.owner = owner;
+  }, true);
+}
+
+export function regenerateAllEventDeps() {
+  restoreEventDep(DepsFromType.Global, { events: globalStore.globalEvents });
+  pagesStore.pages.forEach(page => {
+    restoreEventDep(DepsFromType.Page, page);
+    page.componentInstances.forEach(R.unary(R.partial(restoreEventDep, [DepsFromType.Component])));
+    page.pluginInstances.forEach(R.unary(R.partial(restoreEventDep, [DepsFromType.Plugin])));
+  });
+  sharedStore.sharedComponentInstances.forEach(R.unary(R.partial(restoreEventDep, [DepsFromType.Component])));
+}
+
 function restoreEventDep(
   depsFromType: DepsFromType,
   instance: PageInstance | ComponentInstance | PluginInstance | HotArea | { events: EventInstance[] },
@@ -141,28 +173,3 @@ function restoreEventDep(
     }
   });
 }
-
-function restoreEditInfo({ maxKeys, layoutMode, pageMode }: EditInfoDSL) {
-  editStore.setState(editStore => {
-    editStore.layoutMode = layoutMode;
-    editStore.pageMode = pageMode;
-  });
-
-  if (maxKeys) {
-    setMaxKey(InstanceKeyType.Page, maxKeys[InstanceKeyType.Page]);
-    setMaxKey(InstanceKeyType.Component, maxKeys[InstanceKeyType.Component]);
-    setMaxKey(InstanceKeyType.HotArea, maxKeys[InstanceKeyType.HotArea]);
-    setMaxKey(InstanceKeyType.Plugin, maxKeys[InstanceKeyType.Plugin]);
-    setMaxKey(InstanceKeyType.Action, maxKeys[InstanceKeyType.Action]);
-  }
-}
-
-interface ExtraInfo {
-  owner: UserRecord;
-}
-
-function restoreExtraInfo({ owner }: ExtraInfo) {
-  return editStore.setState(store => {
-    store.owner = owner;
-  }, true);
-}

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

@@ -0,0 +1,9 @@
+import { TimeTravelerConfig } from './types';
+
+export const config: TimeTravelerConfig = {
+  maxStacks: 20,
+};
+
+export function configure(newConfig: Partial<TimeTravelerConfig>) {
+  return Object.assign(config, newConfig);
+}

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

@@ -0,0 +1,70 @@
+import { action } from 'mobx';
+import { timeTraveler } from './timeTraveling';
+import { recordStoreHistory, recordedStores } from './record';
+
+export const withTimeTravel = <T extends { new (...args: unknown[]): any }>(target: T): T => {
+  const original = target;
+  const f = function(...args: ConstructorParameters<typeof target>) {
+    const { name } = original;
+    if (recordedStores[name]) {
+      throw new Error(
+        `Store "${name}" has already been recorded. Make sure that every store has an unique class name and instantiated only once`,
+      );
+    }
+
+    const instance = new original(...args);
+    recordStoreHistory({ [name]: instance as object });
+    return instance;
+  };
+  f.prototype = original.prototype;
+  return f as any;
+};
+
+let updating = false;
+
+export const withSnapshot = (payload?: Record<string, any>) => (
+  target: object,
+  propertyKey: string,
+  descriptor?: PropertyDescriptor,
+): void => {
+  const { initializer } = descriptor as any;
+  descriptor!.value = function(...args: Parameters<ReturnType<typeof initializer>>) {
+    const inUpdating = updating;
+    if (!inUpdating) {
+      updating = true;
+    }
+    const result = initializer.apply(this).apply(this, args);
+    if (!inUpdating) {
+      setTimeout(async () => {
+        if (result instanceof Promise) {
+          await result;
+        }
+        timeTraveler.updateSnapshots(payload);
+        updating = false;
+      }, 0);
+    }
+    return result;
+  };
+};
+
+export function actionWithSnapshot(target: object, propertyKey: string, descriptor?: PropertyDescriptor): void;
+export function actionWithSnapshot(
+  payload: Record<string, any>,
+): (target: object, propertyKey: string, descriptor?: PropertyDescriptor) => void;
+export function actionWithSnapshot(
+  payloadOrTarget: Record<string, any> | object,
+  propertyKey?: string,
+  descriptor?: PropertyDescriptor,
+) {
+  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);
+    };
+  }
+
+  const target = payloadOrTarget as object;
+  withSnapshot(undefined)(target, propertyKey, descriptor);
+  return action(target, propertyKey, descriptor);
+}

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

@@ -0,0 +1,34 @@
+import { isArray, isMap, isObject, isFunction } from './utils';
+
+export function dehydrate(model: any) {
+  if (isArray(model)) {
+    return model.length ? model.map(dehydrate) : [];
+  }
+
+  if (isMap(model)) {
+    if (model.size) {
+      const map: { [key: string]: any } = {};
+      model.forEach((value: any, key: string) => {
+        map[key] = dehydrate(value);
+      });
+      return map;
+    }
+    return {};
+  }
+
+  if (isObject(model)) {
+    return Object.keys(model).reduce<Record<string, any>>((acc, stateName) => {
+      const value = dehydrate(model[stateName]);
+      if (value !== undefined) {
+        acc[stateName] = value;
+      }
+      return acc;
+    }, {});
+  }
+
+  if (isFunction(model)) {
+    return undefined;
+  }
+
+  return model;
+}

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

@@ -1,78 +1,4 @@
-import { walkAndSerialize } from './utils';
-import { runInAction } from 'mobx';
-
-const recordStates: { [key: string]: object } = {};
-const stacks: typeof recordStates[] = [];
-let cursor = 0;
-
-(window as any).stacks = stacks;
-(window as any).undo = undo;
-(window as any).redo = redo;
-
-export function undo() {
-  if (stacks.length <= 1 || cursor === 0) {
-    return;
-  }
-  const snapshot = stacks[--cursor];
-  return restoreSnapshot(snapshot);
-}
-
-export function redo() {
-  if (stacks.length <= 1 || cursor === stacks.length) {
-    return;
-  }
-  const snapshot = stacks[++cursor];
-  return restoreSnapshot(snapshot);
-}
-
-function restoreSnapshot(snapshot: typeof recordStates) {
-  return runInAction(() => {
-    Object.entries(snapshot).forEach(([key, v]) => {
-      Object.assign(recordStates[key], v);
-    });
-  });
-}
-
-export function recordHistory(states: typeof recordStates) {
-  Object.assign(recordStates, states);
-  updateSnapshots(true);
-}
-
-let inReaction = false;
-export const withHistory = (
-  target: { [key: string]: any },
-  propertyKey: string,
-  descriptor?: PropertyDescriptor,
-): void => {
-  const { initializer } = descriptor as any;
-  descriptor!.value = function(...args: Parameters<ReturnType<typeof initializer>>) {
-    const reaction = inReaction;
-    if (!reaction) {
-      inReaction = true;
-    }
-    const result = initializer.apply(this).apply(this, args);
-    if (!reaction) {
-      setTimeout(async () => {
-        if (result instanceof Promise) {
-          await result;
-        }
-        updateSnapshots();
-        inReaction = false;
-      }, 0);
-    }
-    return result;
-  };
-};
-
-function updateSnapshots(assign = false) {
-  const snapshot = Object.entries(recordStates).reduce<{ [key: string]: object }>((accu, [k, v]) => {
-    accu[k] = walkAndSerialize(v);
-    return accu;
-  }, {});
-  if (assign && stacks.length) {
-    Object.assign(stacks[stacks.length - 1], snapshot);
-  } else {
-    stacks.push(snapshot);
-  }
-  cursor = stacks.length - 1;
-}
+export { configure } from './configure';
+export * from './decorators';
+export * from './timeTraveling';
+export * from './types';

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

@@ -0,0 +1,20 @@
+import { Snapshots } from './types';
+import { runInAction } from 'mobx';
+
+export const recordedStores: Snapshots = {};
+
+export function recordStoreHistory(states: Snapshots) {
+  return Object.assign(recordedStores, states);
+}
+
+export function restoreSnapshot(snapshot: Snapshots, callback?: Function) {
+  return runInAction(() => {
+    Object.entries(snapshot).forEach(([key, v]) => {
+      if (key === 'payload') {
+        return;
+      }
+      Object.assign(recordedStores[key], v);
+    });
+    callback?.();
+  });
+}