feat(editor): supporting undo & redo

Author: elliothux

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

@@ -47,15 +47,16 @@ export const withSnapshot = (payload?: Record<string, any>) => (
   };
 };
 
-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(
+interface ActionWithSnapshot {
+  (target: object, propertyKey: string, descriptor?: PropertyDescriptor): void;
+  (payload: Record<string, any>): (target: object, propertyKey: string, descriptor?: PropertyDescriptor) => void;
+}
+
+export const actionWithSnapshot: 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) => {
@@ -66,5 +67,5 @@ export function actionWithSnapshot(
 
   const target = payloadOrTarget as object;
   withSnapshot(undefined)(target, propertyKey, descriptor);
-  return action(target, propertyKey, descriptor);
-}
+  return action(target, propertyKey, descriptor) as any;
+};

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

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

packages/editor/src/states/components.ts

@@ -27,7 +27,7 @@ export class ComponentsStore extends StoreWithUtils<ComponentsStore> {
   constructor() {
     super();
     timeTraveler.onRestore((type, nextSnapshots, currentSnapshots) => {
-      if (nextSnapshots?.payload?.needReloadIndex || currentSnapshots?.payload?.needReloadIndex) {
+      if (nextSnapshots?.payload?.needReloadComponentsIndex || currentSnapshots?.payload?.needReloadComponentsIndex) {
         regenerateAllPagesComponentsIndex();
       }
     });
@@ -52,7 +52,7 @@ export class ComponentsStore extends StoreWithUtils<ComponentsStore> {
     return newInstances;
   };
 
-  @actionWithSnapshot({ needReloadIndex: true })
+  @actionWithSnapshot({ needReloadComponentsIndex: true })
   public addComponentInstance = (componentID: string) => {
     return this.setCurrentPageComponentInstances(instances => {
       const component = getMaterialsComponentMeta(componentID)!;
@@ -73,7 +73,7 @@ export class ComponentsStore extends StoreWithUtils<ComponentsStore> {
     });
   };
 
-  @actionWithSnapshot({ needReloadIndex: true })
+  @actionWithSnapshot({ needReloadComponentsIndex: true })
   private addComponentInstanceAsChildren = (instance: ComponentInstance) => {
     return this.setCurrentPageComponentInstances(instances => {
       const { index: parentIndex } = getCurrentPageComponentIndex(selectStore.containerComponentKey)!;
@@ -92,7 +92,7 @@ export class ComponentsStore extends StoreWithUtils<ComponentsStore> {
     });
   };
 
-  @actionWithSnapshot({ needReloadIndex: true, needReloadDeps: true })
+  @actionWithSnapshot({ needReloadComponentsIndex: true, needReloadDeps: true })
   public deleteComponentInstance = (key: number) => {
     if (!getCurrentPageComponentIndex(key)) {
       return sharedStore.deleteSharedComponentInstance(key);
@@ -115,7 +115,7 @@ export class ComponentsStore extends StoreWithUtils<ComponentsStore> {
     return deletedInstance!;
   };
 
-  @actionWithSnapshot({ needReloadIndex: true })
+  @actionWithSnapshot({ needReloadComponentsIndex: true })
   public resortComponentInstance = (key: number, oldIndex: number, newIndex: number) => {
     if (oldIndex === newIndex) {
       return;
@@ -136,7 +136,7 @@ export class ComponentsStore extends StoreWithUtils<ComponentsStore> {
     });
   };
 
-  @actionWithSnapshot({ needReloadIndex: true })
+  @actionWithSnapshot({ needReloadComponentsIndex: true })
   public moveComponentInstance = (oldIndex: ComponentIndex, newIndex: ComponentIndex) => {
     if (compareComponentIndex(oldIndex, newIndex)) {
       return;

packages/editor/src/states/events.ts

@@ -28,7 +28,7 @@ import {
   createEventInstance,
   regenerateAllEventDeps,
 } from 'libs';
-import { timeTraveler } from 'libs/history';
+import { timeTraveler, actionWithSnapshot } from 'libs/history';
 import { getMaterialsActionMeta } from 'runtime';
 import { selectStore, SelectType } from './select';
 import { componentsStore } from './components';
@@ -40,13 +40,13 @@ import { pagesStore } from './pages';
 export class EventStore {
   constructor() {
     timeTraveler.onRestore((type, nextSnapshots, currentSnapshots) => {
-      if (nextSnapshots.payload.needReloadDeps || currentSnapshots.payload.needReloadDeps) {
+      if (nextSnapshots?.payload?.needReloadDeps || currentSnapshots?.payload?.needReloadDeps) {
         regenerateAllEventDeps();
       }
     });
   }
 
-  @action
+  @actionWithSnapshot({ needReloadDeps: true })
   public addEventInstance = (triggerName: EventTriggerName, target: EventTarget) => {
     const action = target.type === EventTargetType.Action ? getMaterialsActionMeta(target.id)! : undefined;
 
@@ -183,7 +183,7 @@ export class EventStore {
     }
   };
 
-  @action
+  @actionWithSnapshot({ needReloadDeps: true })
   public deleteEventInstance = (index: number) => {
     let eventInstance: EventInstance;
     switch (selectStore.selectType) {
@@ -276,7 +276,7 @@ export class EventStore {
     }
   };
 
-  @action
+  @actionWithSnapshot({ needReloadDeps: true })
   public deleteDepsEventInstances = (type: DepsTargetType, key: number) => {
     let deps: Maybe<DepFrom[]>;
     switch (type) {
@@ -323,42 +323,42 @@ export class EventStore {
     });
   };
 
-  @action
+  @actionWithSnapshot
   public setEventInstanceDataOfCurrentComponentInstance = (data: object, index: number) => {
     return componentsStore.setCurrentComponentInstanceEvents(events => {
       events[index]!.data = data;
     });
   };
 
-  @action
+  @actionWithSnapshot
   public setEventInstanceDataOfCurrentPluginInstance = (data: object, index: number) => {
     return pluginsStore.setCurrentPluginInstanceEvents(events => {
       events[index]!.data = data;
     });
   };
 
-  @action
+  @actionWithSnapshot
   public setEventInstanceDataOfCurrentHotArea = (data: object, index: number) => {
     return hotAreaStore.setCurrentHotAreaEvents(events => {
       events[index]!.data = data;
     });
   };
 
-  @action
+  @actionWithSnapshot
   public setEventInstanceDataOfGlobal = (data: object, index: number) => {
     return globalStore.setGlobalEvents(events => {
       events[index]!.data = data;
     });
   };
 
-  @action
+  @actionWithSnapshot
   public setEventInstanceDataOfCurrentPage = (data: object, index: number) => {
     return pagesStore.setCurrentPage(page => {
       page.events[index]!.data = data;
     });
   };
 
-  @action
+  @actionWithSnapshot
   public resortEventInstanceFromCurrentComponentInstance = (oldIndex: number, newIndex: number) => {
     if (oldIndex === newIndex) {
       return;
@@ -370,7 +370,7 @@ export class EventStore {
     });
   };
 
-  @action
+  @actionWithSnapshot
   public resortEventInstanceFromCurrentPluginInstance = (oldIndex: number, newIndex: number) => {
     if (oldIndex === newIndex) {
       return;
@@ -382,7 +382,7 @@ export class EventStore {
     });
   };
 
-  @action
+  @actionWithSnapshot
   public resortEventInstanceFromCurrentHotArea = (oldIndex: number, newIndex: number) => {
     if (oldIndex === newIndex) {
       return;
@@ -394,7 +394,7 @@ export class EventStore {
     });
   };
 
-  @action
+  @actionWithSnapshot
   public resortEventInstanceFromGlobal = (oldIndex: number, newIndex: number) => {
     if (oldIndex === newIndex) {
       return;

packages/editor/src/states/global.ts

@@ -1,6 +1,7 @@
 import { action, observable } from 'mobx';
 import { getFormDefaultValue, getQueryParams } from 'utils';
 import { getMaterialsContainerMeta } from 'libs';
+import { actionWithSnapshot } from 'libs/history';
 import { EventInstance, GlobalMeta } from 'types';
 import { StoreWithUtils } from './utils';
 
@@ -26,13 +27,13 @@ export class GlobalStore extends StoreWithUtils<GlobalStore> {
   @observable
   public globalData: object = {};
 
-  @action
+  @actionWithSnapshot
   public setGlobalData = (data: object) => (this.globalData = data);
 
   @observable
   public globalStyle: object = {};
 
-  @action
+  @actionWithSnapshot
   public setGlobalStyle = (data: object) => (this.globalStyle = data);
 
   /**
@@ -41,7 +42,7 @@ export class GlobalStore extends StoreWithUtils<GlobalStore> {
   @observable
   public globalEvents: EventInstance[] = [];
 
-  @action
+  @actionWithSnapshot({ needReloadDeps: true })
   public setGlobalEvents = (setter: (events: EventInstance[]) => EventInstance[] | void) => {
     const newEvents = setter(this.globalEvents);
     if (newEvents) {
@@ -63,7 +64,7 @@ export class GlobalStore extends StoreWithUtils<GlobalStore> {
     isEditor: true,
   };
 
-  @action
+  @actionWithSnapshot
   public setMetaInfo = (data: Partial<GlobalMeta>) => (this.metaInfo = { ...this.metaInfo, ...data });
 }
 

packages/editor/src/states/hotAreas.ts

@@ -1,5 +1,5 @@
-import { action } from 'mobx';
 import { EventInstance, HotArea, Maybe } from 'types';
+import { actionWithSnapshot } from 'libs/history';
 import { componentsStore } from './components';
 import { selectStore } from './select';
 
@@ -17,12 +17,12 @@ export class HotAreasStore {
     return component.hotAreas?.[hotAreaIndex];
   };
 
-  @action
+  @actionWithSnapshot
   public setCurrentComponentHotAreas = (hotAreas: HotArea[]) => {
     return componentsStore.setCurrentComponentInstanceHotAreas(() => hotAreas);
   };
 
-  @action
+  @actionWithSnapshot
   public setCurrentComponentHotArea = (setter: (hotArea: HotArea) => HotArea) => {
     const { hotAreaIndex } = selectStore;
     return componentsStore.setCurrentComponentInstanceHotAreas(hotAreas => {
@@ -32,7 +32,7 @@ export class HotAreasStore {
     });
   };
 
-  @action
+  @actionWithSnapshot({ needReloadDeps: true })
   public setCurrentHotAreaEvents = (setter: (eventInstances: EventInstance[]) => EventInstance[] | void) => {
     return this.setCurrentComponentHotArea(hotarea => {
       const events = setter(hotarea.events);
@@ -43,7 +43,7 @@ export class HotAreasStore {
     });
   };
 
-  @action
+  @actionWithSnapshot
   public setHotAreaProps = (
     componentKey: number,
     hotAreaIndex: number,
@@ -58,7 +58,7 @@ export class HotAreasStore {
     });
   };
 
-  @action
+  @actionWithSnapshot({ needReloadDeps: true })
   public deleteHotArea = (componentKey: number, hotAreaIndex: number) => {
     return componentsStore.setComponentInstancePropsByKey(componentKey, ({ hotAreas }) => {
       hotAreas!.splice(hotAreaIndex, 1);